Develop Reference

How do I fade a container to the left when I click on an item in the container

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>

slidetoggle in pure Javascript

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.

animate out image on click function while overlapping its sibling elements

First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.

z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>

For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/

How to give space between images?

I am building my own website with Dreamweaver. I have an portfolio page with an gallery which I used from this tutorial: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950
The images from the tutorial are smaller but I want them bigger like: 324 by 322 px.
Also they make a columm of 4 images next to each other and I want to have 3 to each other.
But when I try that, my images don't go perfectly next to each other.
Here is what I have:
<div class="portfolio">
<article class="entry video">
<a data-rel="prettyPhoto" href="#">
<img class="top" src="images/knop-1.jpg" alt="">
<span class="magnifier"></span>
</a>
</article>
(this article div repeats for every new image)
Some of the CSS:
.portfolio {
width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px;
}
.magnifier {
background:url(images/knop-hover1.jpg) no-repeat center;
width:324px;
height:322px;
position:absolute;
top:10px;
left:10px;
bottom:10px;
right:10px;
opacity:0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
img.top {
position:absolute;
left:0;
right:5px;
}
I hope you guys can help me out.
Thanks!

It looks like you're missing the JQuery from the tutorial. You'll need to add that before it all works like the demo. I notice you're missing a closing /div tag and your img tag should close itself at the end like this: /> instead of just >.
If you want three images instead of four you can make them auto center by applying a width to a surrounding div that encompasses the individual images. Then that surrounding div needs to be inside a larger content div or main div. The main div will have a set width, floated left. Then you can set margin:0 auto; for the surrounding div and it will center everything. You can add some margin to the single image divs to give them some breathing room, too. I made a code snippet so you can see visually what I mean.
.main {
width: 700px;
float: left;
display: block;
background: pink;
}
.surrounding {
width: 510px;
display: block;
margin: 0px auto;
}
.single {
width: 150px;
float: left;
margin: 10px;
}
.single img {
width: 150px;
height: 150px;
}
<div class="main">
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
<div class="surrounding">
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
<div class="single">
<img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
</div>
</div>
</div>
An observation, though. 3 images at 324px width are going to be at least 976px when side by side. That is larger than the width you've set for your page. Maybe you're referring to their sized once clicked?

Jquery image overlay?

I'm looking to overlay an image in the right hand corner on another image using jquery.
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?

#Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
Wrap them in a containing element. Set the containing element to position:relative
Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event...
HTML:
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS:
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
Code:
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
See a working example here: http://jsfiddle.net/jsney/10/

You don't need jQuery for that, you can use CSS for that, for example
My Overlay
CSS
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
This is much easier solution and acceptable for everyone.

Let's assume your first image is wrapped inside a div.
1/ Add another div with a "display:none" style and a class of your choice
2/ On hover load the img (if it hasn't been done before) on the div
3/ slideToggle the div that contain the second image and voila !
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
Of course, you need to set the proper positioning style to the div containing the second image.

Here's a simple way I did it following thomas's code above.
In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox.
I need to do that alot so am using classes not ID's.
My image and overlay image are the same dimensions.
.hide just hides the overlay until the hover function show's it.
I'm not showing the lightbox stuff so it's clearer for this issue.
Notice that a.hoverTrigger wraps the .overlay img as well.
If you don't do that you will get the dreaded flickering effect.
markup:
<div class="merchImg">
<img src="_img/_new-store/item.png" />
<img class="overlay hide" src="_img/_new-store/overlay.png" />
</div>
css:
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
jquery:
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});

We also can achieve this using "jquery.ImageOverlay.js" plugin.
here is example for this.
ASPX Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
============================================================================
CSS :
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
Downloads :
Visit this link to download .js files and images files and live example of implementation in many ways.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html