The hovering effect on the image link is causing the surrounding div to stretch too far

Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. Below is my code snippet along with a jsfiddle link. Appreciate any assistance.

HTML:

<div class="div_for_projects">
 <div class="project_inner_divs">
  <div id="portfolio_project">
    <div id="portfolio_project_child">
      <a href="index.html">
        <!--
        Image Source:
​        http://www.connectwithchildlife.com/2015/10/child-life-portfolio.html
        -->
        <img class="portfolio_page_projects"
        src="http://www.vandelaydesign.com/wp-content/uploads/portfolio2.jpg"
        alt="portfolio_image">
      </a>
      <p>
        <a href="index.html"
        class="text_align project_description">
          PROJECT
        </a>
      </p>
      <a href="#">
        <img class="portfolio_sm_links"
        src="https://maxcdn.icons8.com/Share/icon/Editing//arrow_filled1600.png"
        alt="Portfolio Image Link">
      </a>
   </div>
  </div>
 </div>
</div>

CSS:

.div_for_projects {
  width: 100%;
  height: 420px;
}
.project_inner_divs {
  float: left;
  width: 35%;
}
#portfolio_project {
  position: relative;
  width: 426px;
  height: 420px;
  pointer-events: none;
  transition-duration: 0.4s;
}
#portfolio_project_child {
  pointer-events: auto;
  width: 100%;
  height: 100%;
}
#portfolio_project:hover {
  -webkit-filter: brightness(70%);
}
#portfolio_project:hover .project_description {
  visibility: visible;
  opacity: 1;
}
#portfolio_project:hover .portfolio_sm_links {
  visibility: visible;
  opacity: 1;
}
.portfolio_page_projects {
  width: 426px;
  height: 420px;
}
.project_description {
  position: relative;
  bottom: 250px;
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.4s;
  font-size: 18px;
  font-family: Tahoma, Geneva, sans-serif;
  color: rgb(50, 50, 50);
  display: inline-block;
  left: 170px;
 }
.text_align {
  text-align: center;
}
.portfolio_sm_links {
  width: 40px;
  height: 40px;
  position: relative;
  bottom: 130px;
  left: 350px;
  visibility: hidden;
  display: inline-block;
  opacity: 0;
}
.portfolio_sm_links:hover {
  background-color: grey;
}

jsfiddle link: https://jsfiddle.net/26vutwz9/

Answer №1

The <p> nested inside the div being checked for the hover effect will impact its size calculation. To resolve this issue (though it may introduce other problems), try relocating the <p> element outside of the

<div id="portfolio_project_child">
or its parent.

<div class="div_for_projects">
 <div class="project_inner_divs">
  <div id="portfolio_project">
    <div id="portfolio_project_child">
      <a href="index.html">
        <!--
        Image Source:
        http://www.connectwithchildlife.com/2015/10/child-life-portfolio.html
        -->
        <img class="portfolio_page_projects"
        src="http://www.vandelaydesign.com/wp-content/uploads/portfolio2.jpg"
        alt="portfolio_image">
      </a>
      <a href="#">
        <img class="portfolio_sm_links"
        src="https://maxcdn.icons8.com/Share/icon/Editing//arrow_filled1600.png"
        alt="Portfolio Image Link">
      </a>
   </div>
   <p>
     <a href="index.html"
      class="text_align project_description">
      PROJECT
     </a>
   </p>
  </div>
 </div>
</div>

https://jsfiddle.net/26vutwz9/1/

Answer №2

If you're facing a problem with the paragraph tag, one solution is to remove it from the standard HTML flow by using a position absolute rule, such as:

#portfolio_projects p { position: absolute; top: 0; left:0 }

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

What is the best way to incorporate several php files into a WordPress post?

I have developed a system that retrieves information from a database and presents it in multiple text files. Now, I am looking to move this system to a page on a WordPress website. I have already created a custom page named page-slug.php and added the ne ...

Looking to empty a textbox, give it focus, and avoid triggering an ASP.NET postback all with a single click of a

I am working on an ASP.NET project and I have a simple HTML button. When this button is clicked, my goal is to clear textbox1, set the focus on textbox1, and prevent any postback from occurring. However, I am running into an issue where preventing postba ...

Enhance Compatibility: IE11 URL Polyfill

While creating a URL in my angular app using new URL, I have encountered an issue that it works on all browsers except IE11. To resolve this problem, I attempted to add "url-polyfill" to my "package.json" and imported 'url-polyfill' in the polyf ...

Obtain precise JSON information using Node.js

Having limited experience with Angular JS and Node JS, I find myself in need of assistance. On the server side, I have multiple JSON files containing language translations. Based on a client's request for a specific language, such as French, I must re ...

PHP: How to Return a Multidimensional Array and Separate Variables Simultaneously

I am trying to send a 2D array with multiple individual variables from a PHP script to a JavaScript client using AJAX. Despite many attempts, I haven't been able to figure out how to include additional individual variables (like $var1, $var2, $var3) i ...

Creating three boxes within a single div using standard HTML and CSS

I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS. https://i.stack.imgur.com/dwNZi.png The numbers represent the box numbers in the design. Here is my attempt at coding this: HTML file <!DOCTYPE html& ...

Attempting to retrieve data from a JSON file according to the choice made by the user in a dropdown menu

My goal is to create a user interface where users can select options from a drop-down list and receive corresponding output based on their selection. The drop-down list options are populated using data from a JSON file, and the desired output is derived fr ...

Retrieve specified elements from Bootstrap SelectPicker

My coffee selection script uses the Bootstrap SelectPicker plug-in to choose my favorite coffees. After submitting the form, I want to save the selected values and send them to addCoffee.php?coffee=${coffee}. How can I achieve this? HTML: < ...

Animating SVG elements with the rotation property in SVG.js

Currently, I am utilizing Javascript, Jquery, SVG, and SVG.js in my project. My goal is to rotate a circle around its origin while it's animating. The issue arises when the animation keeps restarting abruptly, causing a jittery motion. Here is the ini ...

What is the best way to display and conceal a loader in order to reveal additional posts?

How can I display a loader when the user clicks on the "load more posts" button, show it while the posts are loading, and hide it once the posts have been successfully loaded? Additionally, I want to show the loader again when the user clicks on the button ...

Changing a single array into a series of arrays

I'm attempting to reverse the flattening process of an array. The JSON array I have as input contains 4 elements: [ { "nestedObj": { "id":12 } }, { "nestedObj": { "id":555 } ...

What is the best way to showcase information from an external API in react js?

As I develop my new app, I am integrating API data from . This feature will enable users to search for their favorite cocktail drinks and display the drink name fetched from the API on the page. However, I am encountering an error that says "Uncaught TypeE ...

Ways to remove the default classes added by ngbootstrap

My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...

I'm having trouble getting the data to parse correctly in ajax. Can anyone explain why it's not working?

I have implemented a system where an excel file is uploaded using AJAX, and information about the success or failure of the upload is sent from the upload page to the PHP page using json_encode. However, I am facing an issue with accessing this data indivi ...

jQuery problem: Unable to access a property that is undefined

After testing my code on JSfiddle, I noticed that it works perfectly. However, when I try to implement it on a webpage with jQuery already loaded in the DOM, I encounter a console error, shown in the screenshot. I am certain that the iframe selector I am ...

Responsive design with Semantic UI

Can you please provide an example of how to design for different screen sizes using Semantic UI instead of Bootstrap? I'm looking for something similar to Bootstrap's sm and lg classes. For instance, would it look like this: <div class="col s ...

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Having trouble finding a relevant answer, the only one I came across was related to Redux directly. So here's my question that might be obvious to some of you. In my code, everything appears to be correct but I'm facing an error that says: Expect ...

Choosing the fourth cell in every row of a table and converting the information

Currently, I am working on a function that is supposed to take the fourth column in each row of a specific table, manipulate the data using a function, and return different data for the cell. This function takes an integer representing total minutes as i ...

Change the value of a particular property in an array of objects by utilizing an inline function

I am working on updating the price field for a specific object. Below is my selectedCurrenciesArray: const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([ { symbol: null, logo: null, price: 0 }, { ...

Is there a similar function in AngularJS that is equivalent to getJSON? Just curious, as I am new to this

As a beginner in javascript, angularJS, and JQuery, I recently embarked on programming an angularJS app that involves using JQuery to fetch JSON data from a webserver. Here is the code snippet I am working with: var obj = $.getJSON( "http://something.com/ ...