Please take a look at this link, http://codepen.io/funhyun/pen/eLmFp .
I am trying to achieve a css3 hover animation effect where upon hovering the thumbnail, the black color overlays with the carot to click animates in. At the moment, when you hover the image, nothing happens. However, if you remove the IMG tag on line 3 of the html code, then it works. How can I make it animate with the image? Any help is greatly appreciated!!
Its working but the overlay is moved below the image.
If you remove overflow: hidden of #box, you can see it working.
you need to give position: absolute to the overlay.
check this
I have used your same code of your's.
Your problem is, that your overlay div isn't over the image, it's under it.
Solved by removing the image tag and adding the image as background-image to #box, see here
Hope i could help :)
You can use this css. it will work fine
#box { width:300px;
height:200px;
margin:5% auto 0 auto;
overflow:hidden;
position:relative;
background: #ccc;}
#overlay { background:#333;
text-align:center;
padding:45px 0 66px 0;
opacity:0;
position:absolute;
top:0px;
right:0px;
left:0px;
-webkit-transition: opacity .25s ease;}
Related
I'm trying to create a cool css3 effect where by when you hover over an image a border comes out from the middle of the image slowly. To do so I have a transparent border and then show the border and apply padding on hover, but when I add the padding it moves the image. Is there a way to keep the image from moving and still have the padding added on hover?
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
}
img{
position: absolute;
left:64%;
margin-left:-128px;
border:solid 3px transparent;
border-radius: 80px;
transition-duration: 1s;
-webkit-transition-duration: 1s; /* Safari */
}
Example - http://jsfiddle.net/kqWZZ/1/
You need to displace the padding added on hover.
It seems as though the best approach is to add a margin initially and then remove it on hover.
jsFiddle example
#dev {
margin:10px;
}
#dev:hover{
border:solid 3px #76c2af;
padding:10px;
margin:0;
}
This essentially displaces the 10px of padding.
For positioning purposes, I changed left:64% to left:33%.
You also add a padding on hover, which moves the image. So either add the padding also to the image without hover, or dont add any padding at all.
Why not transfer the padding attribute on the image itself but not on its hovering state?
I edited your fiddle. Check it here
img{
padding:10px;
....
}
Okay.. so I'm a bit of newbie but not really. Did a lot of html coding back in '04-06'.. decided to pick it up again. Let me know if I don't make sense. I have a client who wants a "lightbox" effect picture gallery for their pictures. For example: when you click on a thumbnail a bigger picture zooms in while the background kind of fades out. I decided to see if I could code it in css3 instead of resorting to javascript or whatnot. I know this is probably impractical.. but the client doesn't have that many pictures and wants a fairly simple site.
Going smoothly for the most part.. except when it comes to bringing in the big picture. I want this picture to come in centered on the page.. but something goofy happens when I transition from 0px to 400px. It seems to grow to the right and bottom while the left and top stay put. Any way to make this grow centered. I know I could probably skip the width and height adjustment and use just the opacity transition.. but that doesn't look nearly as cool.
This is just the early stages so I haven't tested with other browsers.. and I know for a fact I need to add some more code for it to work in other browsers.. but I'm using chrome right now if that helps.
<!DOCTYPE html>
<html>
<head>
<title>LIGHTBOX</title>
<style>
html{
height:100%;
}
img{
max-height:100%;
max-width:100%;
}
.centerimage{
display:block;
margin-left:auto;
margin-right:auto;
}
#imagezoom {
position: absolute;
margin:-200 0 0 -200;
top:50%;
left:50%;
z-index:-1;
padding-right:0;
border: solid 5px white;
overflow: hidden;
width: 0px;
height: 0px;
opacity: .0;
box-shadow: 0px 0px 500px 50px #888888;
transition: opacity .7s, width 1.5s, height 1.5s;
}
#imagezoom:target{
z-index:2003;
width: 400px;
height: 400px;
opacity: 1.0;
}
</style>
</head>
<body>
<div id="imagezoom">
<a href="file://localhost/Users/hollykrahulik/Desktop/
test%20website%20stuff/lightbox2.html">
<img src="images/grumpycat.jpg">
</a>
</div>
<a href="#imagezoom">
<img src="images/grumpycat_thumb.jpg" class="centerimage">
</a>
</body>
</html>
You just missed this margin:-200 0 0 -200; on #imagezoom.
Here's the working example
Edit:
I assume you want this as output. Working Fiddle
#imagezoom:target{
margin:-200px 0 0 -200px;
}
#imagezoom {
transition: opacity .7s, margin 1.5s, width 1.5s, height 1.5s;
}
I'm setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje
However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.
The CSS for this is:
a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;
}
a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;
}
Think it's a silly answer but i can't find it...
Regards
The rules in a.tonijn:hover changes the area for the a element.
You need to add a child element to you a-tag and apply the background image to that element instead.
Try this:
Tonijn<span></span>
/* Selector changed */
a.tonijn:hover span {
background: url(tonijn.png) no-repeat;
height: 83px;
width: 106px;
top: -83px; /* Value changed */
left: -26px; /* Value changed */
position: absolute; /* Attribute added */
display: block; /* Attribute added */
}
When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'
Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like
height: 20px;
width: 20px;
And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go
As you can see here:
http://clients.noxxie.nl/rashosting/
I am using overlay in the image lighter black background.
but the text is also in overlay and that is not to happen.
Does anybody now how to fix it?
Your .text container has an opacity of 0.5 and is being inherited by its sibling content. You can fix it by using an rgba color on the container instead of opacity (though there is sparse support in IE (IE9 and above i believe) like so:
.text {
background-color: rgba(0, 0, 0, 0.5);
}
Or you can use a 1x1 semi-transparent png image as a background on that container. Another method would be to create an overlay div, absolutely positioned to cover the .text container with the opacity and a z-index low enough to stay behind everything else. Something like this:
HTML
<div class="overlay"> </div>
You can place the .overlay div inside of your .text container right at the bottom of the div.
CSS
.text {
position:relative;
z-index:10;
}
.overlay {
position:absolute;
top:0; right:0; bottom:0; left:0;
background-color:black;
opacity:0.5
z-index:1;
}
I'm trying to figure out how to overlay a div on top of an image.
Here's what I've got so far, I'm totally stuck and have been for a while.
http://wilwaldon.com/learning/slideshow.html
Any help would be greatly appreciated, thank you in advance.
Try adding position:absolute; on the overlay. You might also want to add background:transparent if you want the image to show through.
<style type="text/css">
.image{
position:relative;
width:1001px;
height:257px;
}
.overlay{
position:absolute;
left:0;
bottom:0;
width: 300px;
background-color: #fff;
z-index: 600;
}
</style>
Changes from original:
Add dimensions of the image to the container, and set its position to relative
Set overlay position to absolute and position it by top/bottom and left/right properties
You could set the image as the background of your Div.
background-image: url (blahblahblah);