The issue of margin error and vertical alignment on pseudo-elements

Here's the HTML code I am working with:

<article>
    <picture>
        <img src="a.png">
    </picture>
</article

This particular HTML code is used throughout my page, where the image has a varying width. The goal is to create an image hover overlay when hovering on the image, displaying a "+" sign on it. I attempted to achieve this using the following CSS:

article picture { position: relative; }
article picture:before { background: rgba(0,0,0,.75); content: "+"; height: 100%; opacity: 0; position: absolute; transition: opacity .25s ease; width: 100%; }
article picture:hover:before { opacity: 0.9; }

While it works to some extent, I'm facing a couple of issues. The overlay is slightly larger than the image, about 10 pixels. How can I adjust this? Additionally, I want to center the "+" symbol on my image, but traditional methods like vertical-align: middle and line-height are not feasible due to the variable size of the image. Any suggestions?

htmlcss

Answer №1

One issue is that the images are being managed similar to inline blocks. To resolve this, simply utilize display: block;.

article picture {
  display: inline-block;
  position: relative;
}
img {
  display: block;
}
article picture:before {
  background: rgba(0, 0, 0, .75);
  content: "+";
  height: 100%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  transition: opacity .25s ease;
  width: 100%;
}
article picture:hover:before {
  opacity: 0.9;
}
<article>
  <picture>
    <img src="http://www.placehold.it/100x100">
  </picture>
  </article

UPDATE:

Below is another approach I used for achieving the overlay effect you desire: jsfiddle.

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

If the element contains a specific class, then remove that class and apply a new

Encountering an issue here. I have 4 HTML elements structured like this: <!-- Light Color Scheme - Header False and Show Faces True --> <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptiv ...

jquerycsshtml

Vuejs application is not producing the anticipated outcome when an ordered list contains an unordered list

Is there a way to nest an unordered list within an ordered list in vue 2? I've attempted <template> <div class="p-14"> <ol class="numberlist"> <li>An numbered list</li> <li>Cont ...

javascripthtmlvuejs2

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

javascriptjquerycsspaddingmargin

JQuery GET brings back unnecessary HTML content

Currently utilizing a PHP cart class and implementing some jQuery to dynamically update a div when users add products. The issue I'm encountering is that upon adding a product, the list of products on the HTML page gets duplicated (see screenshot) ev ...

javascriptphpjqueryhtmlajax

Are the CSS flow arrows suffering from poor formatting?

https://i.sstatic.net/ni3vf.pngAfter tinkering with code from three different individuals to create CSS arrows, I fear I may have overcomplicated things. Is there any CSS expert out there who can help me streamline this? I'm struggling to adjust the p ...

htmlcss

Is there a more effective method for positioning items in a navigation bar other than using padding-left?

Hey there, I've been working on this navigation bar for quite some time now and finally found a way to center the menu items. However, I want to make sure I'm doing it the right way. Does anyone have suggestions on how to center all the "li" elem ...

htmlcss

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow https://i.sstatic.net/wO5br.png To view my code, please visit: Cod ...

javascripthtmlcss

Delete the "img" and "a" elements from the content within the specified node

Is it possible to only extract text from my HTML content? var sb = new StringBuilder(); doc.LoadHtml(inputHTml); foreach (var node in Doc.DocumentNode.ChildNodes) { if (node.Name == "strong" || node.Name == "#text" || node.Name == "br" || no ...

c#htmlhtml-agility-pack

What's causing ng-show to malfunction in IE11 on AngularJS?

I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...

javascriptangularjshtmlcssangularjs-directive

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

Submitting a form in a jQuery Mobile native application to redirect to a different page

I am embarking on my inaugural attempt at developing a native mobile application using jQuery Mobile, which will subsequently be wrapped in PhoneGap. Although I am new to the world of mobile application development, I am currently facing a minor roadblock. ...

phpmysqlcsshtmljquery-mobile

Having difficulty aligning an image vertically within a table cell

I am facing an issue with aligning images in table cells. Specifically, I have four table cells and want to vertically align a smaller image at the top of its cell. Despite trying to use vertical-align:top for the image within the cell, it doesn't see ...

csshtml-tablevertical-alignmentcss-tables

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

The alignment of unordered lists can be modified

Having a bit of an issue with positioning/resizing UL lists. I have <li> tags with varying heights but the same width. I want to adjust their position so there is no blank space between them when resizing the window, ensuring they are always close t ...

javascriptjqueryhtmlcss

What is the best way to enlarge a specific section of a map or image using HTML?

Can you resize a specific area of a map in HTML? ...

htmldictionaryscalearea

Tips for displaying JSON data by formatting it into separate div elements for the result object

Having recently started using the Amadeus REST API, I've been making AJAX calls to retrieve data. However, I'm facing a challenge when it comes to representing this data in a specific format and looping through it effectively. function showdataf ...

javascriptjqueryhtmljsonajax

Creating an array of items in an HTML template to generate a PDF using Node.js

In my current project, I am utilizing html-pdf for creating PDFs. I have successfully generated all the necessary details in the PDF, however, I am facing an issue with creating a list of items from an array in HTML, which is required for the PDF convers ...

htmlarraysnode.jspdfdynamic

How can I safeguard my HTML and CSS content from being altered using tools similar to Firebug?

Is there a method to deter the alteration of HTML and CSS components on a webpage using tools similar to Firebug? I have noticed that certain users are changing values in hidden fields and modifying content embedded within div or span tags for their perso ...

phpjavascripthtmlcss

Superimpose above the tbody

I am attempting to implement a loading overlay specifically on top of the tbody element. My current method involves adding a tr as the last child of tbody and positioning it using position: absolute, while setting the parent tbody with position: relative. ...

htmlcss

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs