Design HERO IMAGE with CSS Effects | CSS EFFECTS | HERO IMAGE | Main Image| WEBSITE DEVELOPMENT
HERO IMAGE
index.html
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="style.css">
<!-- FONT AWESOME 5 -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</HEAD>
<BODY>
<!-- HERO IMAGE -->
<header class="hero">
<!--hero image-->
<div class="hero-img"></div>
<!-- WEBSITE TITLE -->
<div class="container">
<h1 class="title">Website</h1>
<span class="tag-line">This is the tagline of website</span>
</div>
</header>
<!-- MAIN CONTENT -->
<section class="main">
</section>
<!-- WEBSITE FOOTER -->
<footer class="footer">
</footer>
</BODY>
</HTML>
style.css
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 22px;
}
/********** REUSABLE CSS PROPERTIES **********/
.hero{
width: 100vw;
height: 80vh;
position: relative;
overflow: hidden;
}
.hero-img {
height: 100%;
width: 100%;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/pizza_beer_1200x628.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1,1);
transition: transform linear 150ms,
transform linear 150ms;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 4px solid aqua ;
color: aqua;
padding: 30px 40px;
width: 60%;
height: auto;
border-radius: 10px;
text-align: center;
}
.hero:hover > .hero-img{
background: url(images/pizza_beer_1200x628.jpg);
transform: scale(1.25,1.25);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Comments
Post a Comment