Make an image and text act as one in html-CodePudding

So I am trying to make a dog shelter website, and I was wondering if there was a way to make both the image and the text act as one, without turning it into a table. For example, when I hover over the image the text will change still colour, as if I were hovering over the text. I am very new to HTML so it may be something very simple. Thanks.

<html>
<body>

<style>
a:link {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: #327da8;
}

.name {font-size:20px; font-color:black; font-family:montserrat; text-decoration:none; position:absolute; margin-top: 360px; text-align:left; border-width:1px; border-style:solid; border-color:lightgray; padding: 27.5px; border-radius:0px 0px 15px 15px;
}

a img {
        border-radius: 50%;
        display: block;
        border: none;
}
</style>
<a href="file:///C:/Users/del0044/OneDrive/HTML Coding/PupLove/PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200"></a>
<a  style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML Coding/PupLove/PupLoveLana.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>
</html>
</body>

This is the code

CodePudding user response：

Use general sibling selector (~) selects all elements that are next siblings of a specified element. in your case it should be :

a:hover ~ .name { color: #327da8; }

CodePudding user response：

You can put your image and text into the same div, and give it a class name. Then apply your CSS on that class as well as class:hover.

Example:

.image_and_text_div{
  color: black;
  // rest of your css property
}

.image_and_text_div:hover{
  color: red // it will change only text color if you hover over the image or the text
  // Or you can even directly apply CSS on the text like below
  h4{
     color; red// 
   }
}

<div ><img hre="your image url/src" /> <h4>Puppy</h4> </div>"