Fade in Fade Out on Image Hover Using CSS3

Fade in fade out on image hover using CSS3?

This should work for you! http://jsfiddle.net/L7XCD/1/

Let's use the great mozilla documentation to explain this:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

CCS markup:

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

Since he was using the transition ease-in-out, I thought it was better to use the same transition function.

For more information, check the documentation here

Hope it helps!

CSS3 : Fade in on hover and Fade out when hover is gone

CSS Transitions don't work on display:block/none; You can manage to give that effect using visibility/opacity properties.

Check this example, You can manually add the transition-delay property if you really want it to add.

.main_div {  width: 100px;  height: 100px;  border: thin black solid;  position: relative;}
.main_div .overlay_div {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  visibility: hidden;  opacity: 0;  transition: all 1s ease-out;}
.main_div:hover .overlay_div {  visibility: visible;  opacity: 1;  transition: all 1s ease-in;}

<div class="main_div">  <div class="overlay_div">    some text  </div></div>

Auto fade out and fade In on hover animation

.Class {    transition: all 0.5s;color: #ff0;margin: 50px;font-size: 28px;cursor: pointer;}
.Class:hover {    color: #00f;}

<p class="Class"> This is me </p>

Make image fade out on mouseover in the div

Use psuedo selectors:

View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/

By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.

<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
<a href="http://twitter.com" target="_blank">Follow me</a>
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>

CSS

.subcontainer:hover > img {
    transition: 0.2s;
    opacity: 0;
}

Hover over div/image to fade out image and have text fade in, but hovering over text removes fade out of image. How to prevent?

Solution 1:
Make anchor tag a block element, and add hover to .project-box not img.

a.project-box-anchor {
  /* anchor tag added inline-block */
  display: inline-block;
}

.project-box {
    height: 500px;
    margin-bottom: 80px;
    border-radius: 25px;
    overflow: hidden;
    /*background-position-x: -80px;*/
    /*background-color: #a14ff9;*/
}

/* instead of hovering on image, hover on the whole project box */
.project-box:hover img {
    -webkit-filter: brightness(20%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-text {
    -webkit-filter: opacity(0);
    color: white;
    position: absolute;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.project-box:hover .project-text {
    -webkit-filter: opacity(1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.project-box img {
    object-fit: cover;
    z-index: -1;
}

<a class="project-box-anchor" href="https://google.com" target="_blank" rel="noopener noreferrer">
  <div class="project-box">
    <span class="project-text">foo</span>
    <img style="height:100px;" src="http://placekitten.com/g/200/200" alt="alt_text" />
  </div>
</a>

on hover and on click how to fade out image and fade in content text

Try this: JSFIDDLE

<div class="hover-img">
    <img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" class="img1"/>
    <p class="text">place holder text goes here</p>
</div>

.hover-img {
    position: relative;
    width: 200px;
    height: 200px;
}
.hover-img > img {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 19;
}

.hover-img > p {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: white;
    margin: 0;
    z-index: 9;
}

.hover-img > .img1 {
    opacity: 1;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

.hover-img > .text {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

.hover-img:hover > .img1 {
    opacity: 0;
}

.hover-img:hover > .text {
    opacity: 1;
}

---

Related Topics