Looking for advice on how to create a div with a background image that only appears when hovered over. I also want the image to either zoom in or move to the sides while hovering. Here is my current progress.
.seg1 p:first-child {
font-size: 20px;
padding: 0;
margin: 10% 0% 0% 10%;
}
.seg1 p {
color: #363e3e;
font-size: 32px;
margin: 0% 0% 0% 10%;
}
.seg1 p:nth-child(3) {
color: #ccc;
font-size: 25px;
margin: 0% 0% 0% 10%;
}
.seg1 {
-webkit-border-radius: 400px;
border: 1px solid #b1ebeb;
height: 250px;
width: 250px;
float: left;
background-color: #f1fbfb;
}
.seg1:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-image: url(https://via.placeholder.com/350/000000/FFFFFF/?text=BackgroundImage);
}<div class="seg1">
<p> test </p>
<p> dont </p>
<p> bother </p>
</div>Thank you in advance.
The answer may be subject to change
Instead, I'll provide a working example here.
.seg1 {
-webkit-border-radius: 400px;
border: 1px solid #b1ebeb;
height: 250px;
width: 250px;
float: left;
background-color: #f1fbfb;
}
.seg1:hover {
animation-duration: 3s;
animation-name: zoomin;
animation-fill-mode: forwards;
-webkit-animation-duration: 3s;
-webkit-animation-name: zoomin;
-webkit-animation-fill-mode: forwards;
background-image: url('https://via.placeholder.com/350/000000/FFFFFF/?text=Background-image');
background-position: center;
}
@keyframes zoomin {
from {
background-size: 100%;
}
to {
background-size: 200%;
}
}
@-webkit-keyframes zoomin {
from {
background-size: 100%;
}
to {
background-size: 200%;
}
}<div class="seg1">
<p>Click</p>
<p>To send me an email</p>
<p>For business enquiries</p>
</div>