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
Related
I'm trying to add a transition-delay to the CSS but everywhere I add it is ineffective.
My CSS is:
.imageBox {
position: relative;
float: left;
transition-delay: 3s;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
My HTML is:
<div style="float:left">
<div class="imageBox">
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1010327699098714282/unknown.png" height="300px" width="300px">
<div class="hoverImg">
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1011368277613760583/Me_Purple.png">
</div>
</div>
</div>
Where should my transition delay and ease go? Thank you!
Transition property doesn't work on "display".
Try this:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
opacity:0;
transition:1s;
transition-delay: 3s;
}
.imageBox:hover .hoverImg {
opacity:1;
}
This doesn't make the div disappear, but rather invisible. It won't work in every scenario, but it should here.
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 :)
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>
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;
}