CSS Card Hover Effects | Html CSS

preview_player
Показать описание

Please LIKE our Facebook page for daily updates...

Track: Sinner's Heist - Streetlight People (feat. Harley Bird) [NCS Release]
Music provided by NoCopyrightSounds.
  1. Online Tutorials
  2. css hover effects
  3. css effects
  4. online tutorials
  5. css card design
  6. css card hover effects
Рекомендации по теме
CSS Card Hover 0:12:16

CSS Card Hover Effects | Html CSS

CSS Card Hover 0:15:26

CSS Card Hover Effects | HTML & CSS

CSS Card Hover 0:05:43

CSS Card Hover Effects | Html CSS

CSS Card Hover 0:07:59

CSS Card Hover Effects | Html & CSS

Responsive CSS Cards 0:05:55

Responsive CSS Cards with Hover Overlay Animation

CSS Animated Responsive 0:10:36

CSS Animated Responsive Cards Hover Effects | Html & CSS Only

Animated Card Hover 0:06:29

Animated Card Hover Effect | Html & CSS | CodeEra

CSS Card Hover 0:08:15

CSS Card Hover Effects | Html & CSS

Responsive Card Hover 0:07:26

Responsive Card Hover Animation | HTML & CSS #coding #htmlcssjavascript

CSS Responsive Card 0:04:33

CSS Responsive Card Hover Effects | Html & CSS 2020

css card hover 0:04:21

css card hover effects html css || card animation html css

CSS Card Hover 0:11:56

CSS Card Hover Effects | Html CSS | Web dev

CSS Responsive Card 0:04:15

CSS Responsive Card Hover Effects | Html & CSS

Simple Card Hover 0:01:06

Simple Card Hover Effect HTML/CSS (Quick Tutorial)

CSS Card Hover 0:15:01

CSS Card Hover Effects | Html CSS

CSS Card Hover 0:09:38

CSS Card Hover Effects | HTML & CSS

CSS 3D Flip 0:03:40

CSS 3D Flip Card Hover Effects | Beginners

CSS Card with 0:49:12

CSS Card with hover animation and mobile fallback

responsive Css card 0:13:50

responsive Css card hover effect 2022 || CodingWithFahim

CSS Card Hover 0:11:58

CSS Card Hover Effects | HTML & CSS

Animated Card Hover 0:13:10

Animated Card Hover Effect Using CSS | CSS Card | #css

Css responsive card 0:08:07

Css responsive card hover effect for beginners | awesome card hover animation in 2021

Awesome CSS Card 0:09:16

Awesome CSS Card Hover Effects | CSS Image Card Effects | Html & CSS

Create Animated Card 0:17:39

Create Animated Card Hover Effect Using HTML CSS | Card Hover Effect in HTML CSS

Комментарии
Автор

I think 'Online Tutorials' are the best in css and to me

You are the best boss❤️❤️❤️❤️❤️👏👏👏👏

coolbard
Автор

Спасибо что увеличили экран) Мне с плохим зрением всё стало видно ) У Вас очень хорошие уроки

Elenka
Автор

I will always is support of you.
Thank you Soo much for all your hard work for such an amazing work. You are the boss.

coolbard
Автор

For lazy people...:)

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive boxes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="imgBx">
<img src="img1.jpg">
</div>
<div class="content">
<h3>Post title One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="img2.jpg">
</div>
<div class="content">
<h3>Post title Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="img3.jpg">
</div>
<div class="content">
<h3>Post title Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

</body>
</html>

style.css


body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #003e46;
font-family: 'Poppins', sans-serif;
}

.container {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.box {
position: relative;
width: 300px;
height: 400px;
background: #000;
box-shadow: 0 30px 30px rgba(0, 0, 0, .5);
}

.box .imgBx {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.box .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}

.box:hover .imgBx img {
opacity: 0;
}

.box .content {
position: absolute;
bottom: 20px;
left: 10%;
width: 80%;
height: 60px;
background: #fff;
transition: 0.5s;
overflow: hidden;

padding: 15px;
box-sizing: border-box;
}

.box:hover .content {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}

.box .content h3 {
margin: 0;
padding: 0;
font-size: 20px;
}

.box .content p {
margin: 10px 0 0;
padding: 0;
opacity: 0;
line-height: 1.2em;
transition: 0.5s;
text-align: justify;
}

.box:hover .content p {
opacity: 1;
transition-delay: 0.5s;
}

ROAN
Автор

Awesome Hover Effect, thx for sharing. Stay tuned ;-)

Webnoob
Автор

my favorit video on YouTube, Online tutorial 👍👍👍👍

muhammadzainalarifin
Автор

from me you can save source code in your github account and share to your subscriber

ekagaluhputra
Автор

muchas gracias excelente video me ayudo mucho

derikjoelgarcialemus
Автор

Thank you bro, i made some changes in the design, i would be glad if you check your e-mail.

YusifBayramov
Автор

Mais alguém aqui esta curtindo dos vídeos?

iluminando-se
Автор

Bro can you tell me the name of your editor

hasnainhasan
Автор

Please sir help me how to position these boxes in a scrolling webpage

strxangxl
Автор

great job, please show us where we can download the source code

lorenzessensohn
Автор

I got everything right but the boxes are stuck to top (not vertically centered)...what to do?

akashrajkr
Автор

Buenísimo tener el código (Good to have the code, I would appreciate it)

mauriciovillalba
Автор

From 2:00-2:35 ish, I don't get why you had to write Css styling for both .box .imgBx AND .box .imgBx .img? Couldn't you have just written the Css for .box .imgBx .img?? Both had the same code but .box .imgBx .img has object-fit and transition thats it...

jfroc
Автор

please ser help me to position the boxes in scrolling the web pages

jonneeelll
Автор

what is video editing software your using

srinualla
Автор

Hello, I need your help how I can contact to you ?

sudeeptaadas