mike braa mike braa - 7 months ago 8
Javascript Question

hover on an image, the image opacity and color of title below the image changes...also when the title becomes two line, it ruins the format

I currently have an image and the title below that image. Thing I'm trying to achieve is when I hover on the image I want the color of text to be changed. and I want the opacity of an image to be changed as well.
When I hover on the title, I want the color of that text to be changed to the same color that's been used when I hover on the image.
To clarify, I'm trying to make it like this;http://www.viralnova.com/science/

I have a code like this

<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>


How should I do it to achieve my requirements?

also when the title becomes two lines...the posts are becoming like this

AAA AAA AAA
... AAA AAA
AAA

Answer

see this example

* {
  margin: 0;
}

a {
  text-decoration: none;
  color: #282E5C;
}
.content{
  width:360px;
}
.content:hover a {
  color: red;
}

.content:hover img {
  opacity: .8;
}
<div class="content">
  <figure class="story-image">
    <a href='{{news.get_absolute_url }}'><img src="http://media.galaxant.com/000/459/563/340x252-1459957623.png" class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
  </figure>
  <div id="forever " style="margin-bottom:30px;">

    <h4 style="font-size: 18px;
              font-weight: 400;"><a href='{{news.get_absolute_url }}'>{{news.title}}</a></h4>
  </div>
</div>

Comments