LEARN HOW TO CREATE SLIDER GALLERY IMAGE GRADIENT AND BEAUTIFULL ANIMATI...
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%;}}
