100-project-100-days-website/100_projects/16-creative-image-gallery/style.css
2023-03-09 17:04:22 +03:00
Ask

56 lines
1.2 KiB
CSS

{c43a2807bf897c0ba155ca6756a276e139a7c803 true 1190 style.css 0xc001eeacb0}

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero{
width: 100%;
height: 100vh;
background: #f3f7fe;
padding: 10px 3%;
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
}
.hero h1{
font-size: 75px;
position: relative;
z-index: 2;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-stroke: 2px #111;
-moz-text-stroke: 2px #111;
cursor: pointer;
transition: .3s ;
}
@media(max-width:767px){
.hero h1{
font-size: 30px;
}
}
.hero h1:hover{
-webkit-text-fill-color: #111;
-moz-text-fill-color: #111;
transform: translateY(-10px);
}
.img-box{
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 65%;
background: url(images/background.png);
background-size: cover;
background-position: center;
transition:background-image 1s ;
}
.hero h1:nth-child(1):hover ~ .img-box{
background-image: url(images/Candy.png);
}
.hero h1:nth-child(2):hover ~ .img-box{
background-image: url(images/Cherry.png);
}
.hero h1:nth-child(3):hover ~ .img-box{
background-image: url(images/Melon.png);
}