After days of researching this topic, I have not found any solutions that align exactly with what I am trying to achieve. I believe it should be a simple task using just HTML and CSS, but I seem to be facing some difficulties.
Initially, my goal was to make text appear when an image is clicked, pushing all other content out of the way. However, this proved too complicated and required strange positioning tricks or leaving empty space for the text until it appeared (which is not desired). Most suggestions pointed towards using JavaScript, but I prefer sticking to pure HTML and CSS.
Now, I have given up on that approach and instead, I am focusing on:
- Creating a hover effect (that is also touch-friendly) on an image where the accompanying text gets highlighted or stylized.
HTML:
<div class="left-photos">
<a href="diane">
<img id="diane-photo" src="diane.jpg" alt="diane profile photo" /></a>
</div>
<div class="us-profile-text">
<h4>Diane Adamec - Board President</h4>
<p>TEXT HERE TEXT HERE TEXT HERE</p>
</div>
CSS:
.left-photos {
width: 143px;
float: left;
margin-right: 10px;
}
.us-profile-text p {
padding: 0 5px 10px 5px;
margin: 0;
}
.us-profile-text {
position: relative;
font-size: .8em;
{
a:hover img {
border: 5px solid #ff0000;
}
Your assistance is greatly appreciated!