south zinc
I want a paragraph (that includes a link) to be hidden behind a picture. When you hover over the picture, i want the paragraph to become visable and scale up a little bit. I have this pretty much taken care of by making the <p> color, transparent until hovered on. This works for everything, but for some reason the link is still showing. I am assuming that the default styling for a link is taking over, but i do not know what to do.
Using CSS and HTML:
CSS;
#interests:hover .test-1 {
color: black;
background-color: #e0fbfc;
font-size: medium;
transition: 2s;
border: 2px solid#98c1d9;
border-radius: 5px;
transform: translate(-15px, 10px) scale(1.125);
transition: all 1.3s;
}
.hover {
text-align: center;
margin: 10px 0 10px 0;
font-size:small;
border: 5px solid green;
}
.guy-div {
width: 100%;
height: 49%;
background-size: 300px;
background-repeat: no-repeat;
margin-top: 18px;
z-index: 2;
border-radius: 15px;
}
.test-1, .test-2, .test-3 {
width: 100%;
height: 100%;
color: transparent;
margin: 0 0 0 0;
}
HTML:
<div id="interests">
<div id="foodie-wpr">
<h4>Foodie?</h4>
<div class="guy-div" id="guy-div-1" style="background-image: url(images/guy-fieiri-flame.webp);">
<div class="test-1">
<p id="span-h">Have you ever had Columbus style pizza? It is a thin, crispy pie, generally cut into rectangle slices with toppings from edge to edge. Click the link below to see some of the best pizza places in C-bus: <a class="link" href="https://www.columbusnavigator.com/best-pizza-columbus/">"The Best Pizza In Columbus"</a></p>
</div>
</div>
</div>
forest fiber
charred adder