Opacity is not working when position is absolute
a.Button5{
display:block;
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a.Button5:hover{
opacity:1;
}
<a href="(imageFile)" class="button5" rel="lightbox[imgBox]">
<div class="ch-item cha_01">
<div class="ch-info" style="top:0px; left:30px;">
<h3>(Text)</h3>
</div>
</div>
</a>
.cha_12{
position:relative;
float:left;
width:225px;
height:160px;
top:0px;
left:0px;
background-image:url(images/cha_ra_04.png); }
this works very well.
but
.cha_12{position:absolute;
float:left;
width:136px;
height:378px;
top:316px;
left:814px;
background-image:url(images/cha_ra_12.png);}
this doesn't work in IE10.(Firefox, chrome is working very well)
I don't know what i do wrong. please help me
be more specific
a .ch-item {
opacity:0.7;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
a:hover .ch-item {
opacity:1;
}
Related
I have an image with an embedded title h1. The whole image is clickable a href. When the user hovers over h1 then the background-color of h1 title changes. I would like that the background-color of h1 title changes also when user hovers over the image, so not directly on the h1 title. Possible?
.sh1 h1:hover {
background-color: #000;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sh1 {
background-image: url(https://placeimg.com/140/180/any);
margin:30px;
text-align:center;
float:left;
}
.bt {
background-image: url(https://placeimg.com/140/380/any);
margin:30px;
text-align:center;
float:left;
}
.mt {
background-image: url(https://placeimg.com/240/580/any);
margin:30px;
text-align:center;
float:left;
}
.mt h1:hover {
background-color: red;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.bt h1:hover {
background-color: blue;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<h1>BIG TITLE</h1>
<h1>MEDIUM TITLE</h1>
<h1>SMALL H1</h1>
Change your css selectors like this:
.sh1 h1:hover => .sh1:hover h1
.mt h1:hover => .mt:hover h1 ...
.sh1:hover h1 {
background-color: #000;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sh1 {
background-image: url(https://placeimg.com/140/180/any);
margin:30px;
text-align:center;
float:left;
}
.bt {
background-image: url(https://placeimg.com/140/380/any);
margin:30px;
text-align:center;
float:left;
}
.mt {
background-image: url(https://placeimg.com/240/580/any);
margin:30px;
text-align:center;
float:left;
}
.mt:hover h1 {
background-color: red;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.bt:hover h1 {
background-color: blue;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<h1>BIG TITLE</h1>
<h1>MEDIUM TITLE</h1>
<h1>SMALL H1</h1>
CSS Transition is not working in chrome on image hover, please check the JSFiddle example
HTML
<div class="screenThum">
</div>
CSS
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
background-size:120%;
}
I have tried with previous SO answers but didn't worked with my code, not sure whats wrong?
thanks
If you are comfortable with it then you can use transform:scale
to get same effect. Edited: taking the reference of #Alexandre Beaudet
.screenThum{
overflow: hidden;
width: 350px;
height: 250px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;}
.screenThum .portfolio:hover{
opacity:0.9;
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
<div class="screenThum"></div>
Try to set screenThump width & overflow: hidden. Then use the transform: scale(x) property. This way you will get the zoom effect and the image will not get out of the container width.
.screenThum {
overflow:hidden;
width: 350px;
}
.screenThum .portfolio{
width:350px;
display:block;
height:100%;
background-size:100%;
background-repeat:no-repeat;
height:250px;
position:relative;
opacity:0.4;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.screenThum .portfolio:hover{
opacity:0.9;
transform: scale(3);
}
Hello i have a Problem with transition top.
If i do it like this, it works:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
But if i do it like this, transition top is not working:
.mb-navbarCollapse {
width: 100%;
top:0px;
background-color: #515151;
background-image: url('img/darkgrey-grid-pattern.png');
background-repeat: repeat;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: background-image 0.1s ease-in-out;
-moz-transition: background-image 0.1s ease-in-out;
-o-transition: background-image 0.1s ease-in-out;
-ms-transition: background-image 0.1s ease-in-out;
transition: background-image 0.1s ease-in-out;
-webkit-transition: background-repeat 0.1s ease-in-out;
-moz-transition: background-repeat 0.1s ease-in-out;
-o-transition: background-repeat 0.1s ease-in-out;
-ms-transition: background-repeat 0.1s ease-in-out;
transition: background-repeat 0.1s ease-in-out;
}
This is my nav:
<nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
...
</nav>
maybe this information is important. I add my class mb-navbarCollapse to <nav> but i'm not removing the class navbar which look like this:
.navbar {
height:64px;
padding-left: 30px;
padding-right:-30px;
position: absolute;
top: 150px;
-webkit-transition: top 0.3s ease-in-out;
-moz-transition: top 0.3s ease-in-out;
-o-transition: top 0.3s ease-in-out;
-ms-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
Thanks for reading
EDIT: Harry's answer
Okay, i did this:
-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
-ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 0s ease-in-out, background-repeat 0.1s ease-in-out;
Now top is working but background-image its also animated but i don't want to animate it :/
EDIT2: Demo http://mirsoftware.de/muthbau/
.container{
height: 700px;
width:100%;
}
.need-help-qu {
background-color:#042E49;
color:#ffffff;
padding:0px 10px;
font-size: 20px;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
float:left;
height:28px;
}
.need-help {
float:left;
background-color:#06507D;
color:#ffffff;
padding:5px 10px;
overflow: hidden;
}
.need-help-full {
right:-95px;
position:fixed;
top:40%;
transition: all 0.4s ease-in-out;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.need-help-full:hover {
right:0;
}
<div class"container">
Test sscroll
</div>
<div class="need-help-full">
<a href="#">
<span class="need-help-qu p-n-b">?</span>
<span class="need-help text-sm p-n-r">NEED A HELP</span>
</a>
</div>
I have one div with the text and '?' sign at right side center with fix position. When user hover on '?' sign the div comes out from right to left with transition (like social icon). It is working perfectly.
But when scrollbar comes in small screen the whole div come over the scrollbar instead of near the scrollbar.
Can anyone help me?
Thanks in advance.
Just add
.need-help-full {
z-index:-1;
}
For example, this is what I have as my image map right now, made using an image mapping site.
<div style="width:138px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9201305251918089" src="http://www.image-maps.com/uploaded_files/9201305251918089_1_pizzaa.png" usemap="#Image-Maps_9201305251918089" border="0" width="138" height="71" alt="" />
<map id="_Image-Maps_9201305251918089" name="Image-Maps_9201305251918089">
<area shape="poly" coords="3,3,56,5,19,41,9,26," href="http://www.image-maps.com/home" alt="home" title="home" />
<area shape="poly" coords="64,11,26,49,41,57,61,62," href="http://www.image-maps.com/links" alt="links" title="links" />
<area shape="poly" coords="71,10,74,64,92,57,106,49," href="http://www.image-maps.com/about" alt="about" title="about" />
<area shape="poly" coords="117,40,129,22,133,4,80,5," href="http://www.image-maps.com/botm" alt="botm" title="botm" />
</map>
</div>
http://jsfiddle.net/suv8R/
However, this is what I want to achieve.
<style type="text/css">
#container {
position:fixed;
width:138px;
height:71px;
margin:10px;
background-color:yellow
}
#slice1 {
height:20px;
width:20px;
position:absolute;
margin-top: 0px;
margin-left:0px;
}
#slice1 img:hover {
margin-top: 3px;
margin-left:-8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice2 {
position:absolute;
margin-top: 4px;
margin-left:21px;
}
#slice2 img:hover {
margin-top: 8px;
margin-left:-3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice3 {
position:absolute;
margin-top: 1px;
margin-left:69px;
}
#slice3 img:hover {
margin-top: 8px;
margin-left:3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice4 {
position:absolute;
margin-top: 2px;
margin-left:72px;
}
#slice4 img:hover {
margin-top: 3px;
margin-left:8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice1 img, #slice2 img, #slice3 img, #slice4 img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<body>
<div id="container">
<div id="slice1"><img src="http://static.tumblr.com/8xsfla2/NWbmnda37/slice1.png"></div>
<div id="slice2"><img src="http://static.tumblr.com/8xsfla2/Nmjmnda5b/slice2.png"></div>
<div id="slice3"><img src="http://static.tumblr.com/8xsfla2/jAImnda5o/slice3.png"></div>
<div id="slice4"><img src="http://static.tumblr.com/8xsfla2/KR0mnda62/slice4.png"></div>
</div>
</body>
http://jsfiddle.net/YPsdj/1/
As you can see, each slice is a link, and I want each slice to slide out when I hover over it. The problem with the second example is that each slice is a transparent png, so the transparent parts of each png image overlap the other ones, so hovering on the entire slice doesn't work (especially the first and third slices).
So, if anybody has any solutions on how to make links like this work effectively, you help would be much appreciated.
Thank you!