When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

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
javascriptjqueryhtmlcssdjango

Answer №1

Take a look at this illustration 

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

Answer №2

To make your image interactive, assign it a class name like male. Then, in your CSS, target the .male:hover class to adjust the opacity. Next, assign a class name to the title, for example, name. In your CSS, target .male:hover .name to change the color as desired.

.male:hover{
opacity: 0.5;
}
.male:hover .name{
color: #2222;
}

Answer №3

In regards to image opacity, the concept is quite straightforward. Setting opacity to 1 results in 100% opacity, whereas using 0.8 translates to 80% opacity. This is the specific effect showcased on the provided website, so your CSS code should resemble the following: 

    .img-rounded {
        opacity:0.8;
        }
      a:hover {
            color:blue;
            }
       h4:hover{
        color:red
}

Answer №4

If you're looking to enhance your website's interactivity, consider incorporating jQuery for a user-friendly experience.

To start, assign a class to your title element as shown below:

<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 class='box-title' 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>

Next, implement the following JavaScript code:

$(document).ready(function(){
    $(".img-rounded").hover(function(){
      $(this).css("opacity",1);
      $(".box-title").css("color","red");
    });
    $(".box-title").hover(function(){
      $(this).css("color","red");
    });
});

Also, include the accompanying CSS for styling:

.img-rounded{ opacity:0.8; }
.box-title{ color:black; }

Remember to include the jQuery script in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when JQuery functions fail to execute

This unique program showcases a series of error messages that are designed to appear under specific conditions. These conditions are identified through PHP code, following which the essential JQuery script is echoed via PHP to display the messages. Initia ...

javascriptphpjquery

In angular.js, repeating elements must be unique and duplicates are not permitted

My view controller includes this code snippet for fetching data from an API server: $scope.recent_news_posts = localStorageService.get('recent_news_posts') || []; $http({method: 'GET', url: 'http://myapi.com/posts'} ...

javascriptangularjs

Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance: I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using: <div class="two_col ...

htmlcsspdfcss-multicolumn-layout

NodeJs ERROR: Module not found

When trying to launch an instance running ubuntu with express, I encountered a module not found error that does not occur on my Windows machine. Error Message: node:internal/modules/cjs/loader:1085 throw err; ^ Error: Cannot find module './src/c ...

javascriptnode.jsexpressubuntu

The reason behind the successful execution of the final .then in promise chaining

I am new to JavaScript and have encountered an interesting problem with the following code. Even though I haven't returned anything from the .then method, the last .then (blue color) works instead of the first one (red color). Can someone explain why ...

javascript

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: https://i.sstatic.net/WiBXH.jpg Initially, everything ...

csstextresponsive-designstylingtext-alignment

Fetch external navigation and refresh hyperlinks

After spending an hour searching on Google without finding a solution to my problem, I decided to reach out here for help. Currently, I have a site hosted on a CMS platform and recently created a WordPress blog on a subdomain on a new server. Unfortunatel ...

phpjqueryajax

Here are the steps to refresh a div after an AJAX call that contains a form:

After using AJAX, I am reloading a div in the following way: $('.comment_form').on('submit', function(e){ e.preventDefault(); ..... success: function(data) { $('.result').html(data); ...

jqueryajaxformsreload

jQuery refusing to delete class

var profession = "Chiropractor"; var elementsToToggle = "."+profession+"Toggle"; console.log(elementsToToggle); search(elementsToToggle).hide().show(); returns: .ChiropractorToggle TypeError: Object #<error> has no method 'hide' Even th ...

jqueryremoveclass

Jasmine secretly observes the behavior of Angular services

I'm currently in the process of setting up unit tests for an angular controller using jasmine and karma. Due to the length of my code, I won't be able to include it all here. However, I'll provide some snippets: CompilerController.js (the c ...

javascriptangularjsdependency-injectionjasminekarma-jasmine

Using recursive setTimeout in Javascript may not always utilize the entire final JSON object that is returned

My current approach involves making recursive calls to a URL until it returns either a success or reaches the maximum limit of tries. Below is a compact version of the relevant code: function doSomething(numRetries) { $.post('someURL', {retr ...

javascriptjqueryrecursion

How can we arrange a two-dimensional array in descending order of string length using the first string in the sub-array as the basis for

If I have an array with elements like these: var array = [["This should be last", 1], ["This should be first I think", 1], ["This is the middle one", 1]]; The second value in each sub-array, which is always 1 in this case, doesn ...

javascriptarrays

Having difficulty with uploading static files from Digital Ocean Spaces to my Django application

Throughout the progress of my project, I was able to showcase video files in my templates using the following code: <video width="200" controls> <source src='{{ MEDIA_URL }}{{ post.video }}' type='video/mp4'> ...

djangovideostaticdigital-oceandigital-ocean-spaces

What is the best way to retrieve an ng-model parameter within a controller?

I'm working on implementing a PUT method in my controller and need to bind the new value back to it. I've tried: <div ng-app="myApp" ng-controller="personCtrl"> <form> First Name: <input type="text" ng-mod ...

javascriptangularjsionic-framework

In instances where the text exceeds the width of the container, a horizontal scrollbar will appear

When looking at the custom content section on my website, you will find paragraphs and lists. One of the list items contains the following text: Track your package online: The link provided is quite lengthy and lacks white spaces, causing it to extend ...

htmlcss

Handling an HTTP 401 Unauthorized error in REST API using JQuery Ajax

I've been struggling with parse.com's REST API for an hour now and haven't had any luck. Every time I try, I keep getting an HTTP 401 error with the response {"error": "unauthorized"}. My cloud code looks like this: Parse.Cloud.define("sen ...

jqueryajaxapirestparse-platform

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Recently, I've been working on coding my personal website and have successfully created a single page application using ajax. The content is dynamically loaded between the header and footer whenever a navigation bar link is clicked. To enable the back ...

javascripthtmljqueryajax

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

Arrange elements in a vertical layout and align them to the left when they exceed the boundaries of their container

I am seeking a solution for laying out my design, similar to the one shown in this image Essentially, I have a container with a fixed height of 300px. I want to display a list vertically with each item taking up a width of 33%. If the list becomes too lon ...

htmlcss