Two divs to display on image mouseover - css

Question

finally figured out the result , used both js and css together to work,
thanks guys :)
FINAL JSFIDDLE CODE
find codes below
i have made an example with using other codes, to display 'info <DIV>' to show up when mouseover on image, but i m having problem when i try to show "caption <DIV>" over the image. i have tried to add codes in the css but anything i do stops "info <DIV>" to show up :(
can some one please look into this set of code :jsfiddle
and if the "info <DIV>" can be displayed in a separate <div> it would be great help.
thanks
regards.
code html
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>
<div class="caption">SYMBOL</div>
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption">STAR</div>
​
CSS code
.team , .info{
background: #151515;
height: 150px;
width: 150px;
}
.info{
background:white;
height: 50%;
width: 20%;
display:none;
position: absolute;
top: 10px;
right: 10px;
}
.team:hover + .info {
display:block; }
.team {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.team:hover {
opacity: 0.5;
}​

Answer 1

Its unbelievable what CSS is capable of doing - but don't abuse it too much. There has been some really fancy widgets and templates I have seen done entirely in CSS (which is great) but I would suggest to be careful when you "hack" CSS vs. using javascript. IMHO this is a css hack:
.team:hover + .info {
display:block;
}
It is OK to use CSS to change the style/display of an element NESTED within that element for instance:
<div>
<a class="close" href="#">Close me</a>
</div>
When you hover over <div then a.close should show up (display: block;).
In your specific case - you are using css to change a NON-NESTED element's display. Using javascript is recommended instead of a css hack because if you ever (and most likely you will) want to enable a user to move their mouse away from the picture and hover over the caption div and highlight text, click on link... etc. you will HAVE to use javascript. CSS is limited in its capabilities and its complexity greatly increases when you use transcend beyond its intended purposes.
As such, I recommend javascript (w/ jquery or other library).

Answer 2

I added the caption class in the css and styled the caption.
In your code the caption would stay under the image. Then i set the position:relative and set the position of 20px from the bottom. I gave it a background-color:red in order to let you see where it is located. I also gave the caption a width of 150px as the width of the images. You used the classes team, info and caption. In order to target the mouseover function separetely in every image i created 2 different kind of classes for every image, so: team1, team2, info1, info2, caption1, caption2. If you use want to use 3 images on your webpage you'll have to add team3, info3, caption3 and so on, in your html, css and jquery function. (You can just copy and paste and rename). i added a parent div with id image that wraps every image and gives relative positioning. You can edit the code as you want.
Here is the edited HTML:
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Critical-icon.png" class="team1"/>
<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR></div>
<div class="caption1">SYMBOL</div>
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Favourite-1-icon.png" alt="" class="team2"/>
<div class="info2">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption2">STAR</div>
</div>​
​
Here's the edited CSS:
.team1 {
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info1{
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team2{
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info2 {
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team1:hover {
opacity: 0.5;
}
.team2:hover {
opacity: 0.5;
}
.caption1 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
.caption2 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
#image {
position:relative;
}
​
Then i added some jquery functions that you can put in the body of your html page after the other html code:
$(".team1").mouseout(function () {
$(".caption1").css("visibility","hidden");
$(".info1").css("visibility","hidden");
});
$(".team1").mouseover(function () {
$(".caption1").css("visibility","visible");
$(".info1").css("visibility","visible");
});
$(".team2").mouseout(function () {
$(".caption2").css("visibility","hidden");
$(".info2").css("visibility","hidden");
});
$(".team2").mouseover(function () {
$(".caption2").css("visibility","visible");
$(".info2").css("visibility","visible");
});
​In order to use the jquery functions you have to include the jquery library in your page by inserting: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> in the head of your HTML page, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
Here's a demo on jsfiddle

Answer 3

Final code
html
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.team img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.team .caption {
position: absolute;
bottom: 1px;
right: 0px;
width: 100%;
height: 25%;
display: none;
z-index: 2;
text-align: right;
color: #ffffff;
padding: 10px;
background: rgba(0, 0, 0, .75);
}
.team .caption a {
color: #ffffff;
}
</style>
<body>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').mouseover(function() {
$(this).find('.caption').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.caption').fadeOut(100);
});
});//]]>
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').hover(function() {
$(this).find('.info').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.info').fadeOut(100);
});
});//]]>
</script>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >
<div class="caption">SYMBOL</div>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">
<div class="caption">STAR</div>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>
</body>​
css
.team {
background: #151515;
height: 150px;
width: 150px;
position: relative;
}
.info{
background:white;
height: 100%;
width: 100%;
display:none;
position:fixed;
float:right;
top: 0px;
left: 70% ;
z-index: 99;
}