I am currently working on customizing the appearance of a Wordpress site, and I have encountered an issue with a specific DIV element that I would like to make clickable instead of using its current content. The page-builder being used on the site is making it challenging for me to achieve this easily. Before resorting to creating custom HTML content, I am exploring the possibility of modifying the module through CSS or JavaScript in a way that allows the site owner to still manage and update the content.
For instance:
.container {
width: 100%;
height:400px;
}
.container .module-content {
display: block;
height:150px;
bottom:0;
position: absolute;
width:100%;
overflow:hidden;
transition: ease .5s;
color:white;
text-align:center;
}
.container:hover .module-content {
display: block;
height:250px;
overflow:visible;
}
.container .module-content .module-title {
display: block;
font-size:30px;
height:100px;
padding:50px 25px 0;
margin:0;
background: -moz-linear-gradient(top, rgba(66,114,184,0) 0%, rgba(66,114,184,1) 100%);
background: linear-gradient(to bottom, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%);
}
.container .module-content .module-title a {
color:white;
text-decoration:none;
}
.container .module-content .module-description {
background-color:#4272b8;
height: 50px;
padding:25px;
margin:0;
color: white;
}<div class="container"><!-- this is a 600x400 pixel box with an image for a background -->
<div class="module-content"><!-- this is a 100px height div positioned absolutely and at the bottom with overflow hidden, when the container is hovered, the overflow becomes visible and height is 150px -->
<div class="module-title"><h2><a href="/about/">About</a></h2></div><!-- this heading is the current link and is always visible -->
<div class="module-description"><p>text</p></div><!-- this text is only visible when the container is hovered -->
</div>
</div>In the provided image, you can see that I am able to edit the heading text (with or without a link), paragraph text, and the container background, as the content positioning is controlled via CSS overrides.
https://i.sstatic.net/Pd34H.png
Initially, I considered making the H2 <a href></a> element a block to cover the entire container, but this caused issues with the positioning of the "About" text (shifting it to the top instead of keeping it at the bottom).
Therefore, I also thought about utilizing pseudo-elements like ::before or ::after with content to create a clickable link within the container DIV... Is this approach feasible? If not, could you suggest an alternative method to achieve my desired outcome?