LEARN HOW TO CREATE SLIDER GALLERY IMAGE GRADIENT AND BEAUTIFULL ANIMATI...

0 HTML And CSS Cooding August 20, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="image_container">

<img src="image/a6.jpg" />

<span class="title">Humming Bird</span>

<span class="description">

They are the only birds that can fly backwards and are capable of hovering for a period of time during flight.</span>

<span class="line top"></span>

<span class="line left"></span>

</div>

</body>

</html>

CSS SOURCE CODE

*,

:before,

:after {

margin: 0;

padding: 0;

box-sizing: border-box;}

body {

background-color:hsl(201, 76%, 53%);

height: 100vh;

display: flex;

justify-content: center;

align-items: center;}

.image_container {

position: relative;

width: 95%;

max-width: 500px;

height: min(70vw, 300px);

cursor: pointer;}

img {

width: 100%;

height: 100%;

object-fit: cover;}

.image_container:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color:red; hsl(771, 76%, 53%);

transform: scale(0);

transition: all 800ms linear;

transform-origin: 0 50%;

z-index: 2;

opacity: 0.5;}

.image_container:hover:before {

transform: scale(1);}

span {

position: absolute;

color: #fff;

opacity: 0;

transition: all 800ms linear;

z-index: 3;}

.title {

font-size: 2rem;

left: 25%;

top: 50%;}

.description {

font-size: 1rem;

left: 25%;

top: 65%;

width: 50%;}

.image_container:hover span {

opacity: 1;}

.line {

left: 0;

top: 0;

position: absolute;

background: #fff;

transition: all 800ms linear;}

.top {

width: 3px;

height: 0;

left: 20%;}

.image_container:hover .top {

height: 100%;}

.left {

width: 0;

height: 3px;

top: 95%;}

.image_container:hover .left {

width: 100%;}

@media (max-width: 424px) {

.title {

font-size: 1.5rem;

left: 25%;

top: 50%;}

.description {font-size: 0.8rem;

left: 25%;

top: 65%;

width: 50%;}}