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.
Related
I've implemented a hover state that overlays text when a div is hovered.
Here is the code -
.desktop-image {
position: relative;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
</div>
The problem
When I inspect the page I notice that the div .desktop-image is taking up the full width of the screen (see pic).
Question
How can I make this div wrap to the size of the actual image, so that the hover state is ONLY implemented when that image is hovered, as opposed to when anywhere within the blue section is hovered.
Thanks
By default div's are defined with display: block, meaning that they will take the entire available width.
You can specify that .desktop-image will be display: inline-block; and you will get the wanted result.
My suggestion to you is to use semantic HTML, there are 2 element that are dedicated to what you trying to achieve figure & figcaption.
Added an example with them.
.desktop-image {
position: relative;
display: inline-block;
}
.desktop-image img {
vertical-align: middle;
}
.img_description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
<figure class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<figcaption class="img_description">This image looks super neat.</figcaption>
</figure>
</div>
Please see this.
.desktop-image {
position: relative;
display: inline-block;
}
.img_description {
position: absolute;
top: -13%;
bottom: 0;
left: 0;
color: #000;
visibility: hidden;
opacity: 0;
transition: opacity .7s, visibility .7s;
right:0;
}
.desktop-image:hover .img_description {
visibility: visible;
opacity: 1;
}
<div id="images" class="misma">
<div class="desktop-image">
<img src="http://via.placeholder.com/200x200">
<p class="img_description">This image looks super neat.</p>
</div>
<div class="mobile-image-misma">
<img src="http://via.placeholder.com/100x100">
</div>
</div>
By default div tag has a default display property display: block
In your code
<div class="desktop-image"> div appear full width of the display
set a width: and a min-height: property to solve the problem
.desktop-image {
position: relative;
width: 200px; /*new*/
height: 200px; /*new*/
}
Add CSS property clear: both to the div with the class desktop-image.
Specify the width of the .desktop-image class in percentage like .desktop-image{width:70%;} or whatever percentage suit the page design.
By doing that image will remain in this .desktop-image div.
I'm managing the website of my company which is based on Wordpress and I try to figure out how to change my contact page.
I've made a codepen of what I want to do : http://codepen.io/EzhnoFR/pen/PNmdxm
html :
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
<span>Hover</span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
<span> Hover </span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
<span> Hover </span>
</div>
</div>
css :
#cf img.top {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
#cf img.top:hover {
opacity:0;
}
span{
position: absolute;
bottom: -150px;
left: 0;
z-index: -1;
display: block;
width: 225px;
margin: 0;
padding: 0;
color: black;
font-size: 25px;
text-decoration: none;
text-align: center;
-webkit-transition: .7s ease-in-out;
transition: .7s ease-in-out;
opacity: 0;
}
#cf img.top:hover ~ span{
opacity: 1;
}
/*-----------------------------------------------------*/
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 90px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 50px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
However, when I add this html to my page and the css in my wordpress custom css, it all mess up as you can see : http://www.alabama-pub.com/contact-new-test/
I've tried a lot of things but I can't get to fix it, does anyone has any idea ?
You have extra < br > under image tag which is causing the issue of height changes on hover.
According to other issue please remove z-index from span tag and you are done :)
see
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>
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'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;
}