I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title, I want the text color to change to match the color used when hovering over the image. To better illustrate my idea, I would like it to resemble the design of this website:
Below is a snippet of the code I have:
<div class="row">
<article>
{% for news in newsInCat %}
<div class='col-sm-4'>
<div class="content">
<figure class="story-image">
<a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}" class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
</figure>
<div id="forever "style="margin-bottom:30px;">
<a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><center><h4 style="font-size: 18px;
font-weight: 400;">{{news.title}}</h4></center></a>
</div>
</div>
</div>
{% endfor %}
</article>
</div>
Can anyone provide guidance on how to achieve these specifications?
Additionally, I have noticed that when the title text extends to two lines, the layout of the posts is disrupted:
AAA AAA AAA
... AAA AAA
AAA