I have a <div> element which has a background image. On top of that I have some text that is hidden but when the user hovers over the <div> element that text will show and the <div> opacity will lower. My problem is when you hover over the div all elements inside that change opacity as well. I have looked through stackoverflow to see if anyone has the same problem but all i found were answers that had RGBA using background colors (not images).
Here is my css:
.pic{
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.textstuff{
visibility:hidden;
}
.pic:hover .textstuff{
visibility:visible;
color:black;
}
.pic:hover{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
HTML HERE:
<div class="pic" style="height:150px;width:150px;">
<div class="textstuff">this is text</div>
</div>
Anytime you change the opacity of a parent element, it automatically applies to all children. The only way to get around this is to not have your opacified element be the parent of the text. It'd probably be best to refactor the background element as a sibling of any other elements in that container and just give it some absolute positioning.
Try with :before pseudo-element:
.pic {
position: relative;
}
.pic:before {
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
position: absolute;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
.textstuff{
visibility:hidden;
}
.pic:hover .textstuff{
visibility:visible;
color:black;
}
.pic:hover:before{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
I was able to get this working by wrapping it and setting the .pic to position absolute. This way it fills up the background but doesn't affect the text:
<div class="wrapper">
<div class="pic"></div>
<div class="textstuff">
<p>This is the textstuff</p>
</div>
</div>
CSS code:
.wrapper {
position: relative;
}
.pic {
background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.textstuff {
visibility:hidden;
}
.pic:hover ~ .textstuff {
visibility:visible;
color:black;
}
.pic:hover {
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Here is a fiddle showing an example:
http://jsfiddle.net/jqxw5ajz/
Any element within the .pic class would receive the opacity, in order for it not to receive it you have to create a wrapper for the pic and put the .textstuff in that wrapper sibling to the .pic
<div class="pic_wrapper">
<div class="pic"></div>
<div class="textstuff"></div>
</div>
Related
I have a simple code with CSS transition and image hover effect.
Codepen Demo
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease;
visibility:hidden;
overflow:hidden;
Could you please explain to me:
Why this part causes left to right animation? (apparently "all" property)
transition: all 0.2s ease;
How can I change it to make a simple fade instead of left/right move? Do I have to use jQuery for it?
Thanks
Kris
Change your CSS to the following:
.item .overlay {
position: absolute;
left: 0%;
top:0;
width: 0%;
height: 100%;
opacity:0;
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
overflow:hidden;
}
And on hover
.item:hover .overlay {
top: 0;
left: 0;
visibility: visible;
width: 100%;
height: 100%;
opacity: 1;
}
Updated codepen demo
the left to right is because the position of
.item:hover .overlay and .item .overlay are both 'left: 0;' if you change both to 'right: 0;' you get the animation from right to left
no Jquery is required for a fade effect, you could just add two css properties (opacity) opacity 0 on the .item .overlay and opacity 1 on the .item:hover .overlay
I have an icon inside a div that I would like to fade in over x time, and fade out faster.
What I am trying to achieve is something like: transition: opacity 1s ease-in .1s ease-out;
So when I hover over project, bottom-icons should only ease-in the opacity to 1, but on offhover, it should return to opacity: 0 instantly.
What I have is:
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .5s ease-in;
//other stuff
}
I am trying to do this avoiding jQuery.
You can apply your transition on hover, like so:
.project {
position: relative;
&:hover {
.bottom-icons {
transition: opacity 1s ease-in;
opacity: 1 !important;
}
}
.bottom-icons {
transition: opacity .1s ease-out;
//other stuff
}
https://jsfiddle.net/8x184o6x/
It can be done pretty easily.
.project .bottom-icons {
transition: opacity 0.5s ease-out; /* leaving effect */
}
.project:hover .bottom-icons {
transition: opacity 1s ease-out; /* entering effect */
}
(Sorry that code is in pure CSS but I find it more universal.)
Transitions can be different for normal state and :hover state, and this is what we’re using here.
.project {
position: relative;
&:hover {
.bottom-icons {
opacity: 1 !important;
transition: opacity .5s ease-out;
}
}
.bottom-icons {
transition: opacity 2s ease-out;
//other stuff
}
Just set the icons to easy out of their normal state, and ease out of their hover state differently.
.project {
position: relative;
background: #eee;
text-align: center;
padding: 30px;}
.bottom-icons {
display: block;
background: #ddd;
padding: 5px;
opacity: 1 ;
transition: opacity .5s ease-out;
}
.project:hover .bottom-icons {
opacity: 0;
transition: opacity 2s ease-out;
}
<div class="project">
<div class="bottom-icons">
xxxxx
</div>
</div>
According to your explanation, you can use the following things:
ADD transition to the hover,
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
opacity : 1;
-moz-transition: opacity .25s ease-in-out;
}
div:hover {
opacity: .1;
-moz-transition:2s;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>
</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
How do I add a transition to this rollover?
Here is my css so far:
.img-container {
width: 401px;
height: 267px;
position: relative;
}
.img-container:hover .square-icon {
display: block;
}
.square-icon {
opacity: .5;
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
display:none;
}
And here is the html:
<div class="img-container">
<img alt="lorem" width="401" height="267" src="images/450-300-13.png">
<div class="square-icon"></div>
</div>
I know I need to add:
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
But I'm not sure where to add it?
You need to set the two states (normal and hover) of .square-icon to have different levels of opacity and then you can transition on opacity.
See my jsBin demo here
.img-container:hover .square-icon {
opacity: 1;
}
.square-icon {
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background: url(images/zoom-icon.png) center center no-repeat;
background-color: #FF3860;
cursor:pointer;
opacity: 0;
transition: display 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
The problem started when I needed to have a div set at 60% opacity and on hover it animates to 90% opacity.
The only catch is I need a full white (non transparent) PNG image on top of this box at all times.
So I tried the trick of overlaying a separate div containing the image and used the margins to bring it into position; BUT the background div animation hover over doesn't work when your mouse is on top of the image.
HTML
<div style="position:relative;top:-1px;left:0">
<div class="ontop"><img src="http://www.designdownloader.com/item/pngs/button01_google/button01_google-20110813210436-00005.png" alt="OneSpring - Play Video" /></div>
<div id="box-video">
</div>
</div>
</div>
CSS
#box-video {
position: absolute;
background-color:rgba(0,57,129,1);
top: 0;
left: 0;
padding: 15px;
font-family: 'Helvetica Neue Light', Arial, Helvetica, sans-serif;
width: 210px;
height: 130px;
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
#box-video:hover, .ontop:hover {
cursor: pointer;
/*color: #ffffff;*/
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/xpancom/fZrWA/
How can you make the background hover work even when you are on top of the image?
You could alternatively use :before or :after pseudo class.
It will clean up your code a lot.
This is what your HTML can look like:
<div style="position:relative;top:-1px;left:0">
<div id="box-video"></div>
</div>
Here is more on them, and here is the fiddle: http://jsfiddle.net/jyHMf/
See if that is what you were looking for.
I think you're talking about CSS pointer-events property. pointer-events | MDN
So your code might look like this:
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
pointer-events: none;
}
http://jsfiddle.net/8CZEY/
Put an id on the container:
<div id="box" style="position:relative;top:-1px;left:0">
Now put the hover event on the container instead, and let it affect the child element:
#box:hover {
cursor: pointer;
}
#box:hover #box-video {
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Demo: http://jsfiddle.net/fZrWA/2/
I want to have an image frame that when I hove over it the image inside will zoom in a little (I am using size transition), but the frame will stay the same size.
What happens now that even if the frame has a fixed width and height it is stilled zoomed with the image
HTML:
<div class="img-wrapper">
<img class="thumbnail" src="http://placekitten.com/400/200">
</div>
and CSS
.img-wrapper {
width: 400px;
}
.thumbnail {
width: 400px;
}
.thumbnail {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover {
width: 500px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
http://codepen.io/pen/KCJny
One way to fix this would be to set overflow:hidden;
So, this might work:
.img-wrapper {
width: 400px;
height:200px;
overflow:hidden;
}
If you want the image to stay centered (as an addition to Brian's answer) you can do this:
.thumbnail {
width: 400px;
position:relative;
left:50%;
margin-left:-200px;
}
.thumbnail:hover {
width: 500px;
margin-left:-250px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}