I'm attempting to achieve a similar effect on my website, like this example:
(scroll down to "we specialize in")
I am fairly inexperienced with HTML and CSS, and I'm working within WordPress which adds an extra layer of complexity. I started my coding journey by asking this question on StackOverflow:
Change body background image on hover with pure html/css
However, I would like to include a transition between the images when they swap, and I'm also wondering where in the code I should adjust the font attributes.
div.link>a {
displya: inline-block !important;
position: relative !important;
z-index: 100;
}
.bg1:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.background {
background: transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}<div class=container>
<div class="link">
<a href="#" class="bg1">bg1</a>
<div class=background></div>
<a href="#" class="bg2">bg2</a>
<div class=background>
</div>
</div>
</div>