Animations, Card Design, Sections

Image hover effects Html and CSS

Hello everyone, in this post, we will learn how to use different CSS Image hover effects or card filters in CSS. In the last post, we discussed how to create a contact us page in HTML and CSS. Let us discuss how to use different filters or hover effects of CSS.

Image hover effects:

As you can see in the image we have four images for showing the hover effect. These images are placed in a row using the flex property. You can change them from the grid to flex using CSS properties. The images are placed in a normal position. After moving the cursor over the image it clears that image and blurred other images. It is simply applied using the CSS hover effect property. You can check the code of the hover effect in the below code file.

Then we added four images in the form of rectangular boxes.

Then we added a hover effect to the images. All the images are clear before hovering. Once we hover over one picture then all other pictures got blurred.

We have created this effect using CSS properties.

How to create Image hover effects in CSS?

Download a code editor for image hover effects:

Download a code editor so that you can easily write the code.

Download HTML source code:

Html is a markup language and it is used to create the skeleton of the website. Here we have imported the images with the help of Html tags and all the text is written with the help of HTML.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Image hover effects | FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

  <section class="hero-section">
    <h1 class="main-heading">Image hover effects</h1>
    <div class="card-grid">
      <a class="card" href="#">
        <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHRlY2glMjB3YWxscGFwZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60)"></div>
        <div class="card__content">
          <p class="card__category">Category</p>
          <h3 class="card__heading">Card Heading</h3>
        </div>
      </a>
      <a class="card" href="#">
        <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1561212044-bac5ef688a07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80)"></div>
        <div class="card__content">
          <p class="card__category">Category</p>
          <h3 class="card__heading">Card Heading</h3>
        </div>
      </a>
      <a class="card" href="#">
        <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1567095761054-7a02e69e5c43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dGVjaCUyMHdhbGxwYXBlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60)"></div>
        <div class="card__content">
          <p class="card__category">Category</p>
          <h3 class="card__heading">Card Heading</h3>
        </div>
      </li>
      <a class="card" href="#">
        <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1584303450431-5a0312051758?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60)"></div>
        <div class="card__content">
          <p class="card__category">Category</p>
          <h3 class="card__heading">Card Heading</h3>
        </div>
      </a>
    <div>
  </section>


<script type="text/javascript">

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

<!DOCTYPE html>

<head>

<title> Image hover effects | FantacyDesigns</title>

</head>

<body>

<h1 class="main-heading">Image hover effects</h1>

<p class="card__category">Category</p>

<h3 class="card__heading">Card Heading</h3>

</div>

</a>

<p class="card__category">Category</p>

<h3 class="card__heading">Card Heading</h3>

</div>

</a>

<p class="card__category">Category</p>

<h3 class="card__heading">Card Heading</h3>

</div>

</li>

<p class="card__category">Category</p>

<h3 class="card__heading">Card Heading</h3>

</div>

</a>

<div>

</section>

</script>

</body>

</html>

Source code of CSS:

It is also a markup language and it is used to design our project. Picture alignment, picture radius, background colour etc are done using CSS. In simple words, CSS is used to design the project.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;800&display=swap');



:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

body{
  height: 100%;
}
.main-heading{

  font-size: 40px;
  font-weight: 900;
 font-family: 'Nunito', sans-serif;
  text-align: center;
  background: #fff;
 padding: 5px;
 padding-left: 25px;
 padding-right: 25px;
 position: absolute;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.hero-section{

  align-items: flex-start;
  background-image: linear-gradient(to right, #eb3349  , #f45c43);
 background-image: radial-gradient( circle farthest-corner at 14.2% 24%,  rgba(239,61,78,1) 0%, rgba(239,61,78,0.81) 51.8%, rgba(239,61,78,0.63) 84.6% );  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  margin-top:150px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr);

  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

.card{
  list-style: none;
  position: relative;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.card:before{
    border-radius: 50px;
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{

  background-size: cover;
  background-position: center;
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition:
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category{
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading{
  color: var(--text-lighter);
  font-size: 2.3rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;800&display=swap');

:root{

--background-dark: #2d3548;

--text-light: rgba(255,255,255,0.6);

--text-lighter: rgba(255,255,255,0.9);

--spacing-s: 8px;

--spacing-m: 16px;

--spacing-l: 24px;

--spacing-xl: 32px;

--spacing-xxl: 64px;

--width-container: 1200px;

}

border: 0;

margin: 0;

padding: 0;

box-sizing: border-box;

}

html{

height: 100%;

font-family: 'Montserrat', sans-serif;

font-size: 14px;

}

body{

height: 100%;

}

.main-heading{

font-size: 40px;

font-weight: 900;

font-family: 'Nunito', sans-serif;

text-align: center;

background: #fff;

padding: 5px;

padding-left: 25px;

padding-right: 25px;

position: absolute;

box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.hero-section{

align-items: flex-start;

background-image: linear-gradient(to right, #eb3349 , #f45c43);

background-image: radial-gradient( circle farthest-corner at 14.2% 24%, rgba(239,61,78,1) 0%, rgba(239,61,78,0.81) 51.8%, rgba(239,61,78,0.63) 84.6% ); display: flex;

min-height: 100%;

justify-content: center;

padding: var(--spacing-xxl) var(--spacing-l);

}

.card-grid{

margin-top:150px;

display: grid;

grid-template-columns: repeat(1, 1fr);

grid-column-gap: var(--spacing-l);

grid-row-gap: var(--spacing-l);

max-width: var(--width-container);

width: 100%;

}

@media(min-width: 540px){

.card-grid{

grid-template-columns: repeat(2, 1fr);

}

@media(min-width: 960px){

.card-grid{

grid-template-columns: repeat(4, 1fr);

}

.card{

list-style: none;

position: relative;

box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}

.card:before{

border-radius: 50px;

content: '';

display: block;

padding-bottom: 150%;

width: 100%;

}

.card__background{

background-size: cover;

background-position: center;

bottom: 0;

filter: brightness(0.75) saturate(1.2) contrast(0.85);

left: 0;

position: absolute;

right: 0;

top: 0;

transform-origin: center;

trsnsform: scale(1) translateZ(0);

transition:

filter 200ms linear,

transform 200ms linear;

}

.card:hover .card__background{

transform: scale(1.05) translateZ(0);

}

.card-grid:hover > .card:not(:hover) .card__background{

filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);

}

.card__content{

left: 0;

padding: var(--spacing-l);

position: absolute;

top: 0;

}

.card__category{

color: var(--text-light);

font-size: 0.9rem;

margin-bottom: var(--spacing-s);

text-transform: uppercase;

}

.card__heading{

color: var(--text-lighter);

font-size: 2.3rem;

text-shadow: 2px 2px 20px rgba(0,0,0,0.2);

line-height: 1.4;

word-spacing: 100vw;

}

Then we added the hover effect to our images with the help of CSS

Download source code:

We have a source code file and in this file, all the necessary code files are present with the images. Just click on the download button below the download button and you have a file with all these code files. It is free to download from the below button.

Task:

The hover effect can be applied in different forms on different objects on web pages. We have required Html and CSS for adding hover effects on images and other objects. Right now we have added a hover effect on images. After hovering over an image other images get blurry.
You can reverse this process and practice it. Make the image blurry on hover.

I hope you like this post. If you like this post then kindly like and share this article. Do you have any type of question? If so then comment below.

Thanks for reading this article.

Download Source CodeClick to Download

Go to top