CSS image Hover effect

HTML


<html lang="en">
 <head>
  
  <title>Hover effects</title>
  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" rel="stylesheet"></link>
  <link href="css/style.css" rel="stylesheet"></link>
 </head>
 <body>
  <div class="container">
   <div class="row justify-content-center">
    <div class="text text-center">
     <h4>
     ORIGINAL HOVER EFFECTS</h4>
WITH CSS3 TRANSITIONS AND ANIMATIONS
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-md-8">
     <div class="row justify-content-center">
      <div class="col-md-6">
       <div class="effect1">
        <div class="image">
         <img alt="" class="img-fluid" src="images/1.png" />
         <div class="mask text-center">
          <h4>
          HOVER STYLE #1</h4>
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
          <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">READ MORE</a>
         </div>
</div>
</div>
</div>
<div class="col-md-6">
       <div class="effect2">
        <div class="image">
         <img alt="" class="img-fluid" src="images/2.png" />
         <div class="mask text-center">
          <h4>
          HOVER STYLE #2</h4>
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
          <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">READ MORE</a>
         </div>
</div>
</div>
</div>
<div class="col-md-6">
       <div class="effect3">
        <div class="image">
         <img alt="" class="img-fluid" src="images/3.png" />
         <div class="mask text-center">
          <h4>
          HOVER STYLE #3</h4>
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
          <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">READ MORE</a>
         </div>
</div>
</div>
</div>
<div class="col-md-6">
       <div class="effect4">
        <div class="image">
         <img alt="" class="img-fluid" src="images/4.png" />
         <div class="mask text-center">
          <h4>
          HOVER STYLE #4</h4>
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
          <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">READ MORE</a>
         </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS


body {
    background-image: url('../images/pattern.png');
}

.text {
    margin-top: 25px;
}

a {
    color: #fff;
    padding: 8px 15px;
    background-color: #333;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

.image {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}

img {
    position: relative;
    transition: all 0.4s;
}

.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.mask,
.mask a,
.mask p,
.mask h4 {
    transition: all 0.4s;
}

.mask a,
.mask p,
.mask h4 {
    position: relative;
}

.mask h4 {
    padding: 10px 0;
    color: #fff;
}

.mask p {
    color: #fff;
    padding: 0 20px;
}

.effect1 .mask {
    background-color: #f1c40f;
    left: -400px;
}

.effect1:hover .mask {
    left: 0px;
}

.effect1 img {
    left: 0;
}

.effect1:hover img {
    left: 300px;
}

.effect1 h4 {
    background-color: #e0b210;
}

.effect2 .mask {
    background-color: rgba(142, 68, 173, 0.3);
    opacity: 0;
    visibility: hidden;
}

.effect2:hover .mask {
    opacity: 1;
    visibility: visible;
}

.effect2 h4 {
    background-color: rgba(155, 89, 182, 0.5);
    top: -20px;
    opacity: 0;
    visibility: hidden;
}

.effect2:hover h4 {
    top: 0px;
    opacity: 1;
    visibility: visible;
}

.effect2 p {
    top: 50px;
    opacity: 0;
    visibility: hidden;
}

.effect2:hover p {
    top: 0;
    opacity: 1;
    visibility: visible;
}

.effect2 img {
    transform: scale(1);
}

.effect2:hover img {
    transform: scale(1.2);
}

.effect3 .mask {
    background-color: rgba(52, 152, 219, 0.55);
    left: -300px;
    opacity: 0;
    visibility: hidden;
}

.effect3:hover .mask {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.effect3 h4 {
    background-color: rgba(41, 128, 185, 0.68);
    transform: scale(0);
}

.effect3:hover h4 {
    transform: scale(1);
    transition-delay: 0.2s;
}

.effect3 p {
    transform: scale(0);
}

.effect3:hover p {
    transform: scale(1);
    transition-delay: 0.4s;
}

.effect3 a {
    transform: scale(0);
    display: inline-block;
}

.effect3:hover a {
    transform: scale(1);
    transition-delay: 0.6s;
}

.effect3 img {
    transform: scale(1);
}

.effect3:hover img {
    transform: scale(1.2);
}

.effect4 .mask {
    background-color: rgba(26, 188, 156, 0.58);
    transform: rotate(45deg);
    left: 50px;
    opacity: 0;
    visibility: hidden;
}

.effect4:hover .mask {
    transform: rotate(0);
    left: 0;
    opacity: 1;
    visibility: visible;
}

.effect4 h4 {
    background-color: rgba(22, 160, 133, 0.75);
    top: -50px;
    opacity: 0;
    visibility: hidden;
}

.effect4:hover h4 {
    top: 0;
    opacity: 1;
    visibility: visible;
    transition-delay: 0.7s;
}

.effect4 p {
    left: 300px;
    transform: rotate(45deg);
}

.effect4:hover p {
    left: 0;
    transform: rotate(0);
    transition-delay: 0.6s;
}

.effect4 a {
    top: -100px;
    opacity: 0;
    visibility: hidden;
}

.effect4:hover a {
    opacity: 1;
    visibility: visible;
    top: 0;
    transition-delay: 0.3s;
}
DEMO : VIDEO ON YOUTUBE

Comments

Post a Comment