Responsive Image Cards With Hover Effect - Only Using CSS & HTML | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to design Responsive Image Cards with a hover effect (Image Hover Effect) only using CSS and HTML. When you hover the image all the information (title, description, read more, icon links) will appear on the image. This Image cards based on rows. Each row contains three image cards. This image layout is fully responsive. Let's see how t design these Responsive Image Cards.

First, create the index.html file and the style.css file. After you created these two files, Then add the responsive meta tag and link the style.css file in between <head></head> tags to the index.html file. Then complete the HTML part of the Responsive Image Cards. Also, link the font awesome libraries to the index.html file between <head></head> tags for the card icons. After the HTML part is complete then go to the style.css file to start the styling part. Complete the styling part with responsive stylings of the Responsive Image Cards as you can see in the video. So that's it, Hope this video will be helpful to design Responsive Image Cards only using CSS and HTML.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Cards With Hover Effect</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
  </head>
  <body>

<div class="container">
      
      <div class="row">
        
        <div class="image">
          <img src="1.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="image">
          <img src="2.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="image">
          <img src="3.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      
      
      <div class="row">
        
        <div class="image">
          <img src="4.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="image">
          <img src="5.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="image">
          <img src="6.jpg" alt="">
          <div class="details">
            <h2>Your <span>Title</span></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="more">
              <a href="#" class="read-more">Read <span>More</span></a>
              <div class="icon-links">
                <a href="#"><i class="fas fa-heart"></i></a>
                <a href="#"><i class="fas fa-eye"></i></a>
                <a href="#"><i class="fas fa-paperclip"></i></a>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

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

body{
	height: 100vh;
	font-family: "Raleway", sans-serif;
	background: #2F3238;
}

.container{
	margin: 30px;
}

.row{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.image{
	background: #50A7FF;
	position: relative;
	flex: 1;
	max-width: 460px;
	height: 300px;
	margin: 20px;
	overflow: hidden;
}

.image img{
	opacity: 0.8;
	position: relative;
	vertical-align: top;
	transition: 0.6s;
	transition-property: opacity;
}

.image:hover img{
	opacity: 1;
}

.image .details{
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	width: 100%;
	height: 100%;
}

.image .details h2{
	text-align: center;
	font-size: 35px;
	text-transform: uppercase;
	font-weight: 300;
	margin-top: 70px;
	transition: 0.4s;
	transition-property: transform;
}

.image .details h2 span{
	font-weight: 900;
}

.image:hover .details h2{
	transform: translateY(-30px);
}

.image .details p{
	margin: 30px 30px 0 30px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transition: 0.6s;
	transition-property: opacity, transform;
}

.image:hover .details p{
	opacity: 1;
	transform: translateY(-40px);
}

.more{
	position: absolute;
	background: rgba(255, 255, 255, 0.8);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	bottom: -60px;
	transition: 0.6s;
	transition-property: bottom;
}

.image:hover .more{
	bottom: 0;
}

.more .read-more{
	color: #000;
	text-decoration: none;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
}

.more .read-more span{
	font-weight: 900;
}

.more .icon-links i{
	color: #000;
	font-size: 20px;
}

.more .icon-links a:not(:last-child) i{
	margin-right: 20px;
}

/* Responsive CSS */

@media (max-width: 1080px){
	.image{
		flex: 100%;
		max-width: 480px;
	}
}

@media (max-width: 400px){
	.image .details p{
		font-size: 16px;
	}

.more .read-more, .more .icon-links a i{
		font-size: 18px;
	}
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

UnknownApril 1, 2021 at 6:53 PM
how can i resize the whole card itself like the whole card being boxes instead of rectangles
bbykittnDecember 13, 2022 at 8:44 PM
Hi, i have a question... say if I picked an outlined heart, is it possible to make it change to a filled heart once its clicked on? how would i do that if it is possible?

Wednesday, January 13, 2021

Responsive Image Cards With Hover Effect - Only Using CSS & HTML

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Responsive Image Cards With Hover Effect - Only Using CSS & HTML

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form