Right now I have an image that has another image absolutely positioned on top of the first one. Both images are inside an a tag.
I am trying to get it so that when I hover on any part of the first image, both the first image goes from .5 opacity to full, and the 2nd image goes from 0 opacity to full.
I've been able to make the hover work for the image but the 2nd image only activates it's opacity when I hover directly on it, rather than highlighting both when I'm on either of them.
<div class="of-volume image-column">
<a href="http://www.greatlengthshair.co.uk/hair-extensions/">
<img src="img/artistry-1-bg.jpg" alt="artisans of volume link" class="image-link">
<img src="img/artistry-1-icon.png" alt="" class="artisan-icon">
</a>
</div>
/*//////////////////////////////////////
IMAGE NAV
//////////////////////////////////////*/
.image-column {
background-color: black;
float: left;
width: 33.3333%;
position: relative;
margin-bottom: -3px;
}
.image-column a {
opacity: .5;
}
.image-column a:hover {
opacity: 1;
}
.artisan-icon {
position: absolute;
margin-right: auto;
margin-left: auto;
right: 0;
left: 0;
bottom: 25px;
}
You have mixed up most of your CSS rules. Just attach the desired effects to the correct hover state:
.image-link { opacity: 0.5; }
.artisan-icon { opacity: 0; }
a:hover .image-link { opacity: 1; }
a:hover .artistan-icon { opacity: 1; }
I put both absolute images inside a relative div, then did set the :hover selector on this container.
body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
position:relative;
width:100%;
height:200px;
}
img {
position:absolute;
top: 0px;
left:0px;
width:100%;
height:200px;
-webkit-transition: opacity 1s; /* Safari */
transition: opacity 1s;
}
#pic1 {
opacity:0.0;
}
#pic2 {
opacity:0.5;
}
#container:hover #pic1, #container:hover #pic2 {
opacity: 1;
}
<div id=container>
<img id=pic1 class=picture src="http://i.imgur.com/tMVGqP6.jpg" alt=img>
<img id=pic2 class=picture src="http://i.imgur.com/Goy7oBy.gif" alt=img>
</div>
Related
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
so i have created an image button and i gave it a transparent black hover attribute. For some reason the image is not a "button" anymore, but it still has the hover effect. Is there any way that i can keep the button attribute while still having the color?
http://jsfiddle.net/cp14rbpa/1/
What i am thinking is that the transparent hover overlay overrides the image button attribute. I am not sure if that is the problem though.
<body>
<div class="image">
<input type="image" src="img/testor.jpg" name="saveForm" class="btTxt submit" id="saveForm" />
</div>
</body>
.image {
position:relative;
width:726px;
height:549px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
I guess you want something like this :)
.image {
position: relative;
width: 726px;
height: 549px;
}
.image a {
display: block;
z-index: 2;
position: relative;
}
.image img {
width: 100%;
vertical-align: top;
}
.image a:after {
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image a:hover:after {
opacity: 1;
}
<div class="image">
<a href="#">
<img src="http://www.golfdigest.com.sg/files/u1/726x549-instruction.jpg" alt="Clickable" />
</a>
</div>
Use the <button> tag instead of the <a> tag. Like here
i have following code
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
A link is wrapped inside a div which appears on hover. how do i make this touch device friendly.
jsfidd--> http://jsfiddle.net/yeyene/Nnd7w/17/
Several solutions:
skip hover effects in touch device stylesheets
use JavaScript to turn hover into click interactions
use JavaScript to simulate hover interactions on the touch device (see this Question on StackOverflow
Try this:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
What I am trying to do is, when the user hover on the image the image should reposition along the x-axis and it should reveal the .content. i have set z-index: 10 to image and z-index: 1 to .content to make .content to be underneath the image. but .content still remains on top of the image. Please help me..
Here is my code:
html
<div class="holder">
<img src="http://placehold.it/350x150" />
<div class="content">
<h3>hello there</h3>
view more
<div/>
</div>
css
.holder {
margin-top: 130px;
position: relative;
}
img {
display: block;
transition: -webkit-transform 0.5s;
transition: -moz-transform 0.5s;
z-index: 10;
}
.content {
background: blue;
height: 100%;
color: white;
z-index: 1;
position: absolute;
top: auto;
bottom: 0;
}
a {
color: white;
background: red;
padding: 10px;
}
.holder:hover img {
-webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
}
Here I corrected issue of my code thanks to Jones G. Drange. As he pointed out in his comment
"z-index can only be modified in elements with a position other than static. Your img has position: static by default"
jsfiddle
img {
position: relative;
}
I'm using the following CSS code to do a rollover effect with text:
.thumb {
position:relative;
}
.thumb img:hover {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.thumb:hover {
background:#f00;
}
.thumb span {
z-index:-10;
position:absolute;
top:10px;
left:10px;
}
.thumb:hover span {
z-index:10;
color:#fff;
}
HTML code:
<div class="thumb">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance
I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you go
Demo
HTML
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay">Hello This Is So Simple</div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
opacity: 0;
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 1s;
color: #fff;
text-align: center;
}
.wrap:hover .overlay {
opacity: 1;
}