We Keep Coding

Add text to a popup image only

I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />

Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>

I want to display my text after my thumbnail slider div

I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends

If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});

That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>

Mousing over different images makes different text appear in the same text box

Thanks so much for your help. I am new to JavaScript and trying to learn, but it's a lot to take in. In the meantime, my team created a site where we have 5 different images that represent a capability. Under all those images, we want to have text appear. When you mouse over the image, the corresponding description of the capability should appear centered under all the images. If you move to a different image, the text should change, but it should be in the same location.
It would kind of be like jQuery tabs but with images.
If anyone could help with the code or point me in the right direction, I would really appreciate it!!

With jQuery you can use the hover method to add a animation css to your image text on hover. To update the text in your textbox just place the image text below the hovered image then you can find the text with jQuery and copy that text to the textbox with .text(newText).
To find the text you first have to go to the parent of the image with .parent() (the li tag here) and then you can use .find(class) to go down to the image text.
For documentation to .hover(handlerIn, handlerOut) see the docs here.
A demo for what you're looking for see the demo below and here at jsFiddle.
To the css:
The overflow: hidden; on the li tag is only to hide the text below the images. The li and the image have the same height so the text is invisble.
var $textbox = $('#textbox'),
handlerIn = function () {
var $imgText = $(this).parent().find('.imgText'); // find the text
$textbox.text($imgText.text()); // add the text to the p-tag
$textbox.removeClass('animated fadeOut');
$textbox.addClass('animated fadeIn');
},
handlerOut = function () {
//var $imgText = $(this).parent().find('.imgText');
$textbox.removeClass('andimated fadeIn');
$textbox.addClass('animated fadeOut');
};
$('img').hover(handlerIn, handlerOut);
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid black;
height: 200px;
overflow: hidden;
}
.imgText {
text-align: center;
opacity: 0.0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<img src="http://lorempixel.com/200/200/sports/1" />
<p class="imgText">first image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/2" />
<p class="imgText">second image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/3" />
<p class="imgText">third image text...</p>
</li>
</ul>
<p id="textbox"></p>

Get the image to appear larger with moving my other elements on my page

Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.

If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/

I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/

Using javascript to display text on top of an image on mouse over

I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.
This is my attempt however poor and it is not working.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
obj.filters.alpha.opacity=50;
}
function viewObj(obj1, obj2) {
fadeImg(obj1);
obj2.style.opacity=1;
bj2.filters.alpha.opacity=100;
}
</script>
<div>
<img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>
<div id='txt1' class='image_box_text' >This is image box one</div>
</div>
Thanks in advance.

This should get you started.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
}
function viewObj(obj1, obj2_name) {
var obj2 = document.getElementById(obj2_name);
fadeImg(obj1);
obj2.style.opacity=1;
}
</script>
First, you cannot simply call an object by an id as you did in viewObj. You must do a document.getElementById on its id. Next you will have to check if filters exists (it only does in IE). A better way to do this is to make .faded and .hidden classes in your stylesheet and have the hover event trigger the adding and removal of them.
Here's this code in action: http://jsfiddle.net/WpMGd/