This question already has answers here:
CSS Transition on Hover
(6 answers)
Transitions on the CSS display property
(37 answers)
Closed 2 years ago.
I found this thread to have an image appear over another on hover which works great, but the transition is in an instant snap, I'm hoping to make it a smooth crossfade instead like this (I couldn't get the code there to work properly).
Tried adding 'transition: opacity 1s ease-in-out;' which doesn't work, I'm not the best at this so hoping someone could point out what's wrong please?
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
</a>
</div>
</div>
You have to set an opacity property before you can transition it:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.imageBox:hover .hoverImg {
opacity: 1;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
</a>
</div>
</div>
did you try opacity 0 for display none and opacity 1 for display block along with transition property ?
If that does not work you can you animation keyframes for opacity transition.
.imageBox>div {
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
}
.imageBox:hover .hoverImg {
opacity: 0;
}
<div class="imageBox">
<div class="imageInn">
<a href="https://amovenew.druminternet.uk/first-time-buyer/">
<img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
</a>
</div>
<div class="hoverImg">
<a href="https://amovenew.druminternet.uk/first-time-buyer/">
<img class="round aligncenter" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1054339559,3607230833&fm=26&gp=0.jpg" />
</a>
</div>
</div>
Related
So i have a HTML list where each List item has an image with a header title above it and a box behind the image that transforms on hover. I'm close to getting it to appear the way I'd like, but the list items don't seem to co-operate the way they should. I'm trying to get the box to be directly behind the image and the text to be centered above the box, but currently they are slightly misaligned. Here is a JSFiddle JSFiddle showcasing the List.
an example of one of the list items looks like this:
<li>
<a href = "" class="linkChange">
<h6 class ="headings">Appointment App</h6>
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
<span class="box rotate" id = "box"></span>
</a>
</li>
The css is detailed in the JSFiddle. I'm slightly new to Web Dev so forgive me if some of the CSS is redundant.
Instead of using a <span> after your <img> tag, instead put your image in a <div> and apply the background to that div. Also remove the position: absolute; that you have on .imgs and .box.
<div class="box rotate" id = "box">
<img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>
I think you have far too much CSS going on, and many of the styles are redundant, or being overwritten by other styles. But I don't want to focus too much on that, since this isn't a code review, but rather, a solution. I did trim away styles that were unnecessary.
Here is what I changed:
Moved the h6 outside of the link, since users are likely going to click on the large target area of the image, rather than the heading text.
Added display: flex to your anchor and justified its contents to the center.
I set white-space: nowrap on the h6 so that it looks cleaner above the boxes. Here's the result.
.appsList {
list-style: none;
display: flex;
margin: 0 auto;
}
.appsList li {
position: relative;
padding: 100px;
}
.appsList .headings {
color: purple;
white-space: nowrap;
margin: 0 0 .75rem;
font-size: 1.2rem;
}
.linkChange {
display: flex;
justify-content: center;
}
.imgs {
position: absolute;
z-index: 1;
display: inline-block;
}
.box {
position: absolute;
background: #5FCF80;
width: 200px;
height: 200px;
z-index: -1;
}
/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */
#imgs:hover+#box {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
transition: all 1s ease-in-out;
z-index: -1;
}
.box:hover {
transform: rotate(360deg);
background: #9351A6;
border-radius: 50%;
z-index: -1;
}
.rotate {
transition: all 0.5s ease-in-out;
}
.rotate:hover {
transition: all 1s ease-in-out;
}
<ul class="appsList">
<li>
<h6 class="headings">Appointment App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Second App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Banking App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
<li>
<h6 class="headings">Reimburement App</h6>
<a href="" class="linkChange">
<img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
<span class="box rotate" id="box"></span>
</a>
</li>
</ul>
jsFiddle
On hover, I'm trying to change the opacity of the main parent to darken the main image, but I want to show another image over it in full opacity. Here's what I tried, but it's not working.
<div class="masonry-item">
<div class="masonry-item1">
<a href="#" class="image">
<div class="caption">
<h3><img src="blah" /></h3> <!-- DARKEN THIS -->
</div>
<img src="blah" /> <!-- KEEP FULL OPACITY -->
</a>
</div>
</div>
my css:
.masonry-container .masonry-item .image:hover .caption {
opacity: 1;
}
.masonry-container .masonry-item a.image:hover img {
opacity: .2; /* this seems to darken everything, but when removed darkening doesn't work */
}
.masonry-container .masonry-item1:hover {
background-color: rgba(222,222,222,.5);
z-index:98;
}
Here's an example of what I'm trying to do:
http://screencast.com/t/7qDUmCJMNd
Are you looking for something like this?:
See JSFiddle
HTML:
<div class="masonry-item">
<div class="masonry-item1">
<div class="caption">
<h3><img id="image1" src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" /></h3> <!-- DARKEN THIS -->
</div>
<img id="image2" src="http://laurafranksblog.files.wordpress.com/2013/04/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" /> <!-- KEEP FULL OPACITY -->
</div>
</div>
CSS:
.masonry-item1 {
background-color: #000;
position: relative;
height: 500px;
}
.masonry-item1:hover #image1 {
opacity: .2;
transition: all 1s;
}
/* This is just to get the images to overlap, you don't need this if you're doing it another way */
#image1, #image2 {
position: absolute;
}
Here is my solution. Although there is no darken, I believe you could make it as #mikelt21's answer.
<div class="masonry-item">
<img id="i1" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_07-01-128.png" />
<img id="i2" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_20-01-128.png" />
</div>
<style>
img{
position: absolute;
top:0;
left:0;
transition: all 1s;
}
div:hover #i1{
opacity:1;
}
div:hover #i2{
opacity:0;
}
#i1{
opacity:0;
}
#i1:hover{
opacity:1;
}
</style>
Here is the example in action
i want to create a roll out effect on hover with a CSS transition but it's not working. Does somebody know the solution? I've already tried different things but nothing works.
This is the HTML (bootstrap3):
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tile" id="past">
<a href="#" class="item thumbnail">Title
<span class="mouseover margin1">Blablabla</span>
</a>
</div>
This is the CSS:
.mouseover{
display:none;
height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.thumbnail:hover .mouseover{
height: 5em;
display:block;
}
I'm attempting to do a pure CSS hover on this page here: http://www.bigideaadv.com/big_idea_v2/#work
I tried using absolute positioning on both image elements and using the transition property with opacity to fade them in and out on hover. But since each parent is fluid, they just disappear. I currently have the "off" image set to relative and the "on" image set to absolute. The fade out is cool but the fade in is not because the absolute positioned image has no width and height set. I think that is the reason.
I would like a non css solution. A javascript solution is fairly easy and I could whip one up but I believe it can be done with straight css.
Anyone have any thoughts?
Structure:
<div id="work">
<p class="align-center work-copy"><span class="clarendon-italic">our</span><br />
<span class="proxima-nova">WORK</span></p>
<div id="clients">
<div class="client_box">
<a href="#modal-aaa" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
<img src="wp-content/themes/skeleton/images/clients/aaa_logo.png" alt="American Arbitration Association" />
</a>
</div>
<div class="client_box">
<a href="#modal-art-of-shaving" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo.png" alt="Art of Shaving" />
</a>
</div>
<div class="client_box">
<a href="#modal-entenmanns" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo.png" alt="Entenmanns" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/gdlsk_logo_off.png" alt="GDLSK" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/hale_and_hearty_logo_off.png" alt="Hale and Hearty" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/seviroli_logo_off.png" alt="Seviroli" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
</a>
</div>
</div>
<p class="align-center team-arrow"><img src="wp-content/themes/skeleton/images/down_arrow.png" alt="Down arrow" /></p>
</div>
CSS:
.client_box img {
display: block;
margin: 0 auto;
width: 90%;
max-width: 260px;
}
#work .client_box a[href*="modal"] {
position: relative;
margin: 0 auto 0 auto;
}
#work a[href*="modal"] img {
position: relative;
top: 0;
left: 0;
-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;
}
#work a[href*="modal"] img:nth-child(2) {
position: absolute;
}
#work a[href*="modal"] img:nth-child(1) {
opacity: 1;
}
#work a[href*="modal"] img:nth-child(1):hover {
opacity: 0;
}
#work a[href*="modal"] img:nth-child(2) {
opacity: 0;
}
#work a[href*="modal"] img:nth-child(2):hover {
opacity: 1;
}
#work .client_box:nth-child(3n) {
border-right: 0;
}
You can do this - along with opacity/transition, manipulate the height as well.
#work a img {
position:relative;
margin:0 auto;
opacity:1;
display:block;
transition-property:display, opacity;
transition-duration:.5s;
transition-timing-function:ease-in-out;
}
#work a img:nth-child(2) {
opacity: 0;
height:0;
overflow:hidden;
}
/*hover*/
#work a:hover img:nth-child(1) {
opacity:0;
height:0;
}
#work a:hover img:nth-child(2) {
opacity:1;
height:auto;
}
The initial fade-in isn't perfect but looks good.
I had to change some inherited CSS within your current code, so here is an extract: http://jsfiddle.net/uRQxa/1/
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;