CODEWITHSUNDEEP
csscss-transitionscss-transforms
user4259777
user4259777

Reputation:

css3 transition ease out

i create a mask for image. when i hover over mouse on image then the mask will show but when the mouse is out then it will suddenly disappear rather then slowly.i want something like This Effect. This is my Jsfiddle

my code is...

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
        <link rel="stylesheet" href="css/bootstrap.css"/>

    <style>
        .top
        {
            margin-top: 200px;
        }
        .top div
        {
            padding:0px;
            margin: 0px;
        }
        img
        {
            width: 100%;
            height: 400px;
            padding: 0px;
            margin: 0px;
            -webkit-transition: margin 1s ease;
            -moz-transition: margin 1s ease;
            -o-transition: margin 1s ease;
            -ms-transition: margin 1s ease;
            transition: margin 1s ease;

        }



.blog-post:hover img

        {

          margin-left: 100px;
        }

.blog-post
{
    border: 1px solid #c0c0c0;
    float: left;
    overflow: hidden;

}

.mask
{

    top: 0;
    left:0;
    padding: 0;
    position: absolute;
    display: inline-block;
    overflow: hidden;
    visibility: hidden;
    width: 250px;
    height: 100%;
    border: 1px solid #ff1493;
    -webkit-transition: all 0.5 ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.5s ease-in-out;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
    transition: transform 0.4s, opacity 0.2s 0.4s;
    background: #ff1493;


}
.mask h4
{
    text-align: center;
}
  .blog-post:hover .mask
        {
            visibility: visible;
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      transform: rotateY(0deg);
      -webkit-transition: -webkit-transform 1s, opacity 0.2s;
      -moz-transition: -moz-transform 1s, opacity 1.2s;
      transition: transform 1s, opacity 0.2s;


  }



    </style>
       </head>
<body>

<div class="container col-md-12 top">
    <div class="col-md-4">

    <div class="blog-post">

        <img src="image/Msz.jpg"  alt=""/>
        <div class="mask clearfix">
            <h4>Post title</h4>
        </div>

    </div>


</div>



<script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/bootstrap.js"></script>
    <script>

    </script>
<script></script>
</body>
</html>

i want the when the mouse is out from image then it will slowly disappear rather then fast.

Upvotes: 0

Views: 5100

Answers (2)

user3857775
user3857775

Reputation:

Try this css

.

blog-post
    {
        float: left;
        width: 100%;
        position: relative;
        display: block;
        -webkit-perspective: 1700px;
        -moz-perspective: 1700px;
        perspective: 1700px;
        -webkit-perspective-origin: 0 50%;
        -moz-perspective-origin: 0 50%;
        perspective-origin: 0 50%;

    }

    .mask
    {

        top: 0;
        left:0;
        padding: 0;
        position: absolute;
        display: inline-block;
        overflow: hidden;
        height: 100%;
        background-color:#ff1493;
        z-index: 10;
        text-align: center;
        width: 50%;
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
        -moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
        transition: transform 0.4s, opacity 0.2s 0.4s;



    }
    .mask h4
    {
        text-align: center;
    }
      .blog-post:hover .mask
            {

          opacity: 1;
          -webkit-transform: rotateY(0deg);
          -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
          -webkit-transition: -webkit-transform 1s, opacity 0.2s;
          -moz-transition: -moz-transform 1s, opacity 1.2s;
          transition: transform 1s, opacity 0.2s;
          text-align: center;
      }

Upvotes: 0

Harry
Harry

Reputation: 89750

There are a few things that were needed to achieve the effect mentioned in the linked website and they are as follows:

  1. The transition properties should be set on the base element (and not on :hover selector) when the transition should happen smoothly both on hover in and hover out. If the transition is set on the :hover selector the hover out would happen abruptly.
  2. The rotation of the meta content in the linked site happens with the origin on the left edge of the meta div and it also happens with a bit of perspective. So both these need to be added to your code. While you already had the transform-origin set, the values needed to be modified.

.top {
  margin-top: 200px;
}
.top div {
  padding: 0px;
  margin: 0px;
}
img {
  width: 100%;
  height: 400px;
  padding: 0px;
  margin: 0px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: margin 1s ease;
}
.blog-post:hover img {
  margin-left: 100px;
}
.blog-post {
  border: 1px solid #c0c0c0;
  float: left;
  position: relative;
}
.mask {
  top: 0;
  left: 0;
  padding: 0;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  width: 250px;
  height: 400px;
  border: 1px solid #ff1493;
  -moz-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: perspective(1500px) rotateY(-90deg);
  -moz-transform: perspective(1500px) rotateY(-90deg);
  transform: perspective(1500px) rotateY(-90deg);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  background: #ff1493;
}
.mask h4 {
  text-align: center;
}
.blog-post:hover .mask {
  -webkit-transform: perspective(1500px) rotateY(0deg);
  -moz-transform: perspective(1500px) rotateY(0deg);
  transform: perspective(1500px) rotateY(0deg);
}
<div class="container col-md-12 top">
  <div class="col-md-4">
    <div class="blog-post">
      <img src="http://stylonica.com/wp-content/uploads/2014/02/Free-Wallpaper-Nature-Scenes.jpg" alt="" />
      <div class="mask clearfix">
        <h4>Post title</h4>

      </div>
    </div>
  </div>

Upvotes: 1

Related Questions