I am working on a simple project where a single block element hover will show 4x zoom element. I did it through pure css and css3 transition. See the jsfiddle demo . There will be four element , each has different hover element. But when I hover on it only one hover element is showing though it is not associate with that block or element.
Check the demo to make yourself an opinion.
.main {
position: relative;
width: 300px;
overflow: hidden
}
.main a {
width: 50%;
height: 50%;
float: left;
}
.main a .child {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: gray;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.main a:hover .child {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
<div class="main">
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>1.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>2.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>3.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>4.Text</h4>
</div>
</a>
</div>
Demo project on JSFiddle
Important note: if i use display none or block in hover instate the css3 transition then it is working fine, But i need the fade effect.
the problem here is that the four .child element is showed when hover on a element, but only the last .child is visible, to resolve this isue use visibility property instead display:
https://jsfiddle.net/f9m1mnce/
.main{
position: relative;
width: 300px;
overflow:hidden
}
.main a{
width: 50%;
height: 50%;
float:left;
}
.main a > .child{
position: absolute;
left:0;
right:0;
bottom:0;
top: 0;
visibility: hidden;
background: gray;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.main a:hover > .child{
-webkit-transition: opacity 0.2s ease-in .2;
-moz-transition: opacity 0.2s ease-in .2 ;
-ms-transition: opacity 0.2s ease-in .2;
-o-transition: opacity 0.2s ease-in .2;
transition: opacity 0.2s ease-in .2;
top: 0;
visibility: visible;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
<div class="main">
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
</div>
A absolute element is associated to its parent relative element, in your demo in your demo you need to set position relative to a tag
.main a{
width: 50%;
height: 50%;
float:left;
position:relative;
}
You can try using ::before
HTML
<ul id="content-ul">
<li>
<a href="#" target="_blank" titulo="Lorem 1">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 2">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 3">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 4">
<img src="http://placehold.it/150x150" />
</a>
</li>
</ul>
CSS:
#content-ul{
display: block;
width: 340px;
margin: auto;
overflow: hidden;
}
#content-ul li,#content-ul li a{
display: block;
position: relative;
width: 150px;
height: 150px;
float: left;
overflow: hidden;
}
#content-ul li{
margin: 10px 10px ;
}
#content-ul li a{
text-decoration: none;
color: #fff;
font-size: 14px;
text-shadow: 0 1px 0 #000;
font-weight: bold;
border-radius: 4px;
}
#content-ul li a img{
border-radius: 4px;
}
#content-ul li a:before{
visibility: hidden;
content: attr(titulo);
position: absolute;
line-height: 250px;
float: left;
width: 150px;
height: 150px;
background: rgba(0,0,50,.5);
border-radius: 4px;
overflow: hidden;
text-align: center;
font-size: 25px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
#content-ul li a:hover::before{
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
visibility: visible;
}
Working Demo
Here an update based on your code:
HTML:
<div class="main">
<a href="" content="1Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="2Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="3Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="4Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
</div>
CSS:
.main{
position: relative;
width: 300px;
overflow:hidden
}
.main a{
width: 50%;
height: 50%;
float:left;
}
.main a:before{
visibility: hidden;
content: attr(content);
position: absolute;
line-height: 250px;
float: left;
width: 150px;
height: 150px;
background: rgba(0,0,50,.5);
border-radius: 4px;
overflow: hidden;
text-align: center;
font-size: 25px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.main a:hover::before{
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
visibility: visible;
}
Working Demo
Related
ive been trying to recreate the hover dual effect that is on https://andreas-demo.myportfolio.com/
However i cant seem to get both to align correctly and then i cannot get the affect that hovers over the entire section but that changes BOTH: 1- Darkening the image, 2 -inversing the colors.
I want to be able to get both affects to happen while hovering over the entire block, just like on the site above^.
Here's my code;
img {
display: block;
width: 60%;
height: 450px;
background-color: #f2f2f2;
!important;
-webkit-filter: brightness(100%);
}
a img:hover {
-webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.media {
background-color: #f2f2f2;
!important;
text-align: center;
}
p {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<a href="">
<div class="media">
<img src="img/pexels-photo-733438.jpeg" class="img-fluid" alt="Responsive image">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
On container:hover, set your container'background-color as black (default to white) and set the image opacity as 0.5.
Move the :hover pseudo-class to one of the 3 parent (wrapper) elements -
.container, .container > a, or .media element. This will have the effect of adding the overlay to both elements on :hover.
Like this:
.container {
font-family: Arial;
}
.container:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container__link {
display: flex;
text-decoration: none;
}
.media {
flex: 6;
background-color: #222222;
}
img {
display: block;
width: 100%;
height: 450px;
opacity: 1;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container:hover .media img {
opacity: 0.3;
}
.description {
flex: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color: #ffffff;
color: #222222;
}
.container:hover .description {
background-color: #222222;
color: #ffffff;
}
p {
padding: 0;
margin: 0;
}
<div class="container">
<a href="" class="container__link">
<div class="media">
<img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
<div class="description">
<p>PROJECT 1</p>
<p>2017</p>
</div>
</a>
</div>
I have some divs set up so they expand when you hover on them, but at the moment they aren't closing when you don't hover on them, it just stays on the last one you hovered on. How can I get it so they are all closed if you aren't hovering on one?
JS
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
tiles.removeClass('active');
$(this).addClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
CSS
.buttons .button h4 {
z-index:3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position:relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
padding: 15px;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
font-size: 81px;
}
.buttons .active p {
opacity: 1;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.buttons .active h4 {
margin-top: 15px;
display:none;
}
HTML
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test.jpg" alt="" />
<h4 style="color:black;">Documents</h4>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there:
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
Its example from https://api.jquery.com/hover/
You can also use mouseover() and mouseout() if you want to do that differently.
I have following setup:
$('.home-cat-wrapper a').hover(function() {
var this_left = parseFloat($(this).find('.product-sticker-image').data('left'));
var this_right = parseFloat($(this).find('.product-sticker-image').data('right'));
var left = 0;
var right = 0;
if (this_left > 21) {
left = 2 * (this_left - 21);
} else {
left = 10;
}
if (this_right > 21) {
right = 2 * (this_right - 21);
} else {
right = 10;
}
$(this).find('.product-sticker-image').css({
'top': '0',
'left': left + '%',
'right': right + '%'
});
$(this).find('.home-page-category-hover').stop(true, false).fadeIn(200);
}, function() {
var this_top = $(this).find('.product-sticker-image').data('top');
var this_left = $(this).find('.product-sticker-image').data('left');
var this_right = $(this).find('.product-sticker-image').data('right');
$(this).find('.product-sticker-image').css({
'top': this_top,
'left': this_left,
'right': this_right
});
$(this).find('.home-page-category-hover').stop(true, false).fadeOut(200);
});
.col-xs-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.home-page-category-box {
padding: 0 20px;
text-align: center;
margin-bottom: 51px;
}
.home-cat-wrapper {
background-color: #f0f0f0;
}
.home-page-category-heading {
color: #ffffff;
font-size: 13.1px;
font-weight: 600;
background: #000000;
padding: 13px 0 10px;
}
.home-page-image-wrapper {
position: relative;
}
.home-page-category-hover {
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
}
.home-page-category-hover span {
color: #ffffff;
font-size: 12.44px;
background: url("../images/footer-background.jpg");
font-weight: 600;
padding: 13px 0;
display: inline-block;
width: 100%;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.category-image-wrapper {
width: 100%;
background: #f0f0f0;
padding: 45px 0 65px;
position: relative;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.category-sticker-container {
position: relative;
}
.product-sticker-image {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
}
.category-sticker-container > img {
width: 100%;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.product-sticker-image img {
padding: 0;
width: 100%;
}
.home-cat-wrapper a:hover .category-image-wrapper {
background: #ffffff;
}
.home-cat-wrapper a:hover .category-image-wrapper .category-sticker-container > img {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 home-page-right-container">
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-3">
<a href="http://weadmire.dx3webs.com/film.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Film</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/l/alfred-hitchcock.png" alt="Film-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Film">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: block; opacity: 1;"><span>63 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;">
<div class="home-cat-wrapper col-xs-12 category-4">
<a href="http://weadmire.dx3webs.com/design-architecture.html">
<div class="col-xs-12 home-page-category-heading" style="height: 41px;">Design & Architecture</div>
<div class="col-xs-12 home-page-image-wrapper">
<div class="col-xs-12 category-image-wrapper">
<div class="col-xs-12 category-sticker-container">
<div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;">
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/d/admire-rio.png" alt="Design & Architecture-artwork">
</div>
<img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Design & Architecture">
</div>
</div>
</div>
<div class="home-page-category-hover" style="display: none; opacity: 1;"><span>17 DESIGNS | SEE THEM</span>
</div>
</a>
</div>
</div>
</div>
When you hover the box you can see there is slight flicker, a blink appears in the t-shirt logo and after that same happens when hover out. I tried with back face visibility and other transform properties but no luck. How can I get rid of this flicker? Thanks.
fiddle
Just add z-index to .product-sticker-image class.
Check the demo
You should use transition: width 0.2s ease; on .category-sticker-container > img in this situation:
.category-sticker-container > img {
width: 100%;
-webkit-transition: width 0.2s ease;
-moz-transition: width 0.2s ease;
-ms-transition: width 0.2s ease;
-o-transition: width 0.2s ease;
transition: width 0.2s ease;
}
JSfiddle here
below is my code:
html:
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
<a href="#menu-toggle" id="menu-toggle" >Press</a>
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div>
</div>
</div>
css:
#wrapper {
width: 100vw;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y:auto;
background: #5F657C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
js:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
The jsfiddle is below:
JSFIDDLE
My problem is for the left side yellow div, the content inside will kinda squeeze together when the sidebar slide to the left.
I want to make it just hide underneath and don't want the content to be squeezed. Do you guys have any idea?
You could do it like this:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: -250px;
width: 250px;
height: 100%;
overflow-y: auto;
background: #050545;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper" style="background-color:red">
<div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here
<div id="result"></div>
</div>
<div id="header" class="container-fluid">
<div class="navbar">
Press
<div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span>
</div>
</div>
</div>
</div>
The width is set default to 250px. In my snippet I'm playing with the offset left to hide/show the sidebar. Study my code and you'll see how it works.
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/