I am trying to make an image hover with background behind.
The problem is that this is not working smooth on all browsers. I want the background immediately hover when the mouse enters the image. how can i make this smooth and work on all browsers?
HTML:
<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 portfolio" id="work">
<div class="container">
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#nieuwecreatie">
<img src="image/nieuwecreatie.jpg" alt="nieuwecreatie" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#avpro">
<img src="image/avpro.jpg" alt="avpro" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#fuxing">
<img src="image/fuxing.jpg" alt="fuxing" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6 hidden-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
</div>
<div class="row">
<section class="col-lg-3 col-sm-4 col-xs-6 visible-sm">
<a href="#seedsofhope">
<img src="image/seedsofhope.jpg" alt="seedsofhope" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#beneluxtaxi">
<img src="image/benelux-taxi.jpg" alt="benelux-taxi" class="transition"/>
</a>
</section>
<section class="col-lg-3 col-sm-4 col-xs-6">
<a href="#intergroep">
<img src="image/intergroep.jpg" alt="intergroep" class="transition"/>
</a>
</section>
</div>
</div>
<div id="hovercontent" class="transition"></div>
</div>
CSS:
.transition{transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s;}
.portfolio{padding:150px 0; position:relative;}
.portfolio #hovercontent{position:absolute; top:0; left: 0; width:100%; height:100%; background-size: 100% !important; z-index:-999; opacity: 0.4;}
.portfolio section{opacity: 0; margin-bottom:20px;}
.portfolio section img{width:100%; position: relative;}
.portfolio section .item-layer{display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position: absolute; top:0; left:0; text-align: center; padding-top:100px; font-family: BebasNeue; font-size: 2em; color:white;}
.portfolio section img:hover{margin:-10px 0 0 0;}
jQuery:
//load bg images
$('#hovercontent').fadeOut();
if(window.location.hash || !window.location.hash){
history.replaceState(null, null,' ');
var url = $(location).attr('href')+'image/';
}
$('.portfolio img').mouseenter(function(){
var srcValue = $(this).attr('src').split('/');
srcValue = srcValue[1].split('.');
srcValue = srcValue[0]+'-bg';
$('#hovercontent').fadeIn(function() {
$(this).css('background', 'url('+url+srcValue+'.jpg) no-repeat');
});
});
What am I doing wrong and how can I fix it?
Check out this fiddle and change it to your needs. Store your image in a data= attribute.
HTML:
Red BG
Green BG
Blue BG
Yellow BG
Javascript:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
color = self.data('color');
$('body').css('background-color',color);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
Change it to fit your needs, this snippet is easily cofigurable and it works in all modern browsers (>IE9, Chrome, Safari, Firefox, Mobile etc...). To set images as background, I would use it like this:
HTML:
Some BG
JS:
$(document).ready(function(){
$('a').mouseenter(function(){
var self = $(this),
url = self.data('bg-url');
$('body').css('background-image', url);
});
});
CSS:
body {
background-color: pink;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
EDIT TO ENABLE BACKGROUND IMAGE SUPPORT
Check out this fiddle. It's not the nicest solution but it works as expected.
For each link it creates a DIV with a background-image. After this the corresponding div is shown based on the hovered link.
HTML
One
Two
Three
Four
CSS
.bgholder {
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
transition:opacity 1s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
}
a {
position: relative;
z-index: 2;
}
JS
$(document).ready(function(){
$('a').each(function(i){
var self = $(this),
bg = self.data('bg'),
container = '<div class="bgholder" id="back-'+i+'" style="background-image: url('+bg+');"></div>';
self.data('trigger', 'back-'+i);
$('body').append(container);
});
$('a').mouseenter(function(){
var self = $(this),
cont = self.data('trigger');
$('.bgholder').css('opacity',0);
$('#'+cont).css('opacity',1);
});
});
Related
do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.
Image
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada A </h2>
</div>
</div>
<div class="col-sm-6 col-xs-12 text-center">
<div class="zgrade">
<img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." />
<h2 class="zgrade-txt" style="color:white"> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>
Css
.zgrade {
position: relative;
border: 1px solid #333;
overflow: hidden;
width: 745px;
}
.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;
Edit: Added CSS code, I tried adding br and span in HTML code.
We could use simple css to add a margin to the element. This would create empty space between the elements.
Add this to your external stylesheet or in your html file(best place is head):
<style>
.img-fluid {
margin-right: 20px; /*feel free to change this to any amount*/
}
</style>
or
style="margin-right:20px"
Margin is space outside of an element, which mostly acts like white space. It is counted in the element size but it is outside the border and background color does not effect it.
I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).
I am creating a website where the homepage has an automatic image slider, I have this issue where the other pages (service page) overlap and stay right on the home page. I tried fixing this issue setting the homepage to 100vh and the image from the service stays right on top.
I tried removing the absolute positioning on the slider and desc and that disfigured the outlook. I tried forcing the code to work by creating a dummy div and setting a height to push down the service page div and it kinda worked but I want my code as clean as possible, I know someone has a better to deal with this please help out.
I also want the images to be positioned next to each as inline and that is not working.
The three pictures you see on the automatic slider are a separate page and I am trying to set to it below the home page (automatic image slider)
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
.desc-container {
position: absolute;
bottom: 25%;
left: 23%;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.mySlides {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top:0;
left:0;
opacity: 0;
}
/*----------------------------------------------------
#Home page
-----------------------------------------------------*/
.main{
width:calc(100%- 300px);
}
.homePage {
overflow: auto;
}
.menu {
text-align: center;
}
.slideshow-container {
margin: auto;
}
.fadeIn {
opacity:1;
}
/*----------------------------------------------------
#Service Page
-----------------------------------------------------*/
div .services {
width:100%;
overflow: auto;
}
.column {
float: left;
width: 350px;
height: auto;
overflow-x: hidden;
padding:10px;
margin-left: 300px;
}
.row {
}
.row:after {
content: "";
clear: both;
display: table;
}
<div class="main">
<section id="homePage">
<div class="homePage">
<div class="slideshow-container">
<div class="mySlides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Luxury Events</h6>
<h1 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h1>
<p class="greytxt">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.</p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Creating Impact</h6>
<h1 class="blacktxt"> STRATEGY AND SALES</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Lasting Memories</h6>
<h1 class="blacktxt">SERVING WITH LOVE</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
</div>
</div>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
<section>
<div class="services">
<div class="row">
<div class="column">
<img src="Images/eventbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/restaurantbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/memorialbg2.jpg" alt="" style="width:100%">
</div>
</div>
</div>
</section>
</div>
I try to make an effect that is executed by clicking on an item within the container, container slide to right/left and fade, after the content is faded it needs do be display hide to make place for new content.
The future header will be placed outside the container thus the header do not fade. Nothing i tried seem to work. Anybody any suggestions for this problem?
I will be implementing the effect on my website www.bartmulder.nl/beta1.0 so when you click on a photo the container whit all the photos will fade and slide before display none
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: 0.5s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
Here's the jQuery / JavaScript way of accomplishing this too...
Simply just call animate on the element and specify what kind of animation, speed, and completion function (optional).
For the example below I am passing a JSON object to specify what actions to accomplish with the animation (which I removed from CSS), then after the animation it will trigger the element to not be displayed any longer.
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).animate({
opacity: 0,
marginLeft: -100
}, 1000, function() {
$(this).css("display", "none");
});
});
.box img {
margin: 0px auto;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
You must apply the class 'clicked' in the parent element '.container', not in the 'this', so use jQuery parent to access the parent element '.container' to add the clicked class in the correct element.
// change .box1 to .container and you will see the effect that i am looking for
$('.box1').on('click', function() {
$(this).parent('.container').toggleClass('clicked');
setTimeout(function() {
document.getElementById("containerWerk").style.display = "none";
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
}
.container.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
If you want just the image go to other side
// change .box1 to .container and you will see the effect that i am looking for
$('.box').on('click', function() {
$(this).toggleClass('clicked');
setTimeout(function() {
$(this).css('display','none');
}, 500);
});
.container {
-webkit-transition: all ease .5s;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box img {
margin: 0px auto;
cursor: pointer;
transition: all ease .5s;
opacity: 1;
margin-left:0;
position: relative;
}
.box.clicked {
margin-left: -100px;
opacity: 0;
transition: all ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerWerk" class="container">
<div class="box box1">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
<div class="box box2">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
Background: I am using ShuffleJS and when no results are returned on a filter, I want to display a message.
So I'm trying to loop through HTML generated by php and create an array of class names from children elements of a div. Then use 'inArray' to determine if any elements have the 'shuffle-item--visible'. If they don't, then print the message.
Here is my HTML example:
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
<a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
<figure class="project-box" style="background-image: url("http://127.0.0.1/wp-content/uploads/sites/3/2016/05/57143cf93c44d8d51d2a5b9d-800x800.jpg"); min-height: 360px;">
<figcaption>
<div class="site-title">
<p>Digital Agriculture</p>
</div>
</figcaption>
</figure>
</a>
and example that is set to hidden:
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[cif]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(759px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
<a class="rwp-site" href="http://127.0.0.1/dmrc">
<figure class="project-box" style="background-image: url("http://127.0.0.1/wp-content/uploads/sites/5/2017/03/DMRC_2017_group-1-800x800.jpg"); min-height: 360px;">
<figcaption>
<div class="site-title">
<p>Digital Media Research Centre</p>
</div>
</figcaption>
</figure>
</a>
</div>
It's evident that what hides/shows the element is the shuffle-item--visible/shuffle-item--hidden class.
I am using this bit of JS to try and create the array:
var sitesArray = new Array();
jQuery(".shuffle-item").each(function () {
var siteStatus = jQuery(this).find('.shuffle-item--visible').map(function () {
return this.value;
}).get();
array.push(siteStatus)
})
console.log(sitesArray);
It's very messy and not returning anything like what I am looking for E.g. ["shuffle-item--hidden", "shuffle-item--hidden", "shuffle-item--visible"...]
Firstly, what am I doing wrong? and is there a better more simplified way of achieving the result? To determine if a jsshuffle category/filter pulls back null results?
Here's a working solution. Hope it helps!
var arr = [];
$(".shuffle-item").each(function () {
if($(this).hasClass("shuffle-item--visible")){
arr.push("shuffle-item--visible");
}
})
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
<a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
<figure class="project-box" style="">
<figcaption>
<div class="site-title">
<p>Digital Agriculture</p>
</div>
</figcaption>
</figure>
</a>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
<a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
<figure class="project-box" style="">
<figcaption>
<div class="site-title">
<p>Digital Agriculture</p>
</div>
</figcaption>
</figure>
</a>
</div>
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.