Ensure that the text remains in the forefront while applying a scaling effect to the image

My image gallery features a hover effect that utilizes a CSS transform when the user hovers over the images.

transform: scale(1.1);

Before the hover effect, the image appears like this: https://i.sstatic.net/fiP5e.jpg

And with the effect applied, it looks like this: https://i.sstatic.net/RPjq6.jpg

Although the zoom effect is nice, the text seems to disappear into the background. I attempted to use z-index, but it had no impact. How can I ensure that the text remains in the foreground? Here is a link to the jsfiddle: https://jsfiddle.net/xk2us9q8/

htmlcssimage

Answer №1

For the z-index property to take effect, a positioning value other than static is required.

To make it work, simply include position:relative in the code.

.container {
  width: 350px;
  height: 350px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
p {
  color: white;
  width: 350px;
  text-align: center;
  font-size: 28px;
  z-index: 100;
  margin-top: -90px;
  position: relative;
}
.dnnmedia_image {
  width: 350px;
  height: 350px;
  transition: all .2s ease-in-out;
  overflow: hidden;
  object-fit: cover;
}
.dnnmedia_image:hover {
  transform: scale(1.1);
}
<div class="container">
  <img src="https://dummyimage.com/350x350/000/fff" class="dnnmedia_image" />
</div>
<p>
  Random text
</p>

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

The optimal method for designing a select menu to ensure it works smoothly on various web browsers

Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...

javascriptjqueryhtmlcss

Creating an adaptable image with CSS or Material UI

Is it possible to create a responsive image that shifts from the top right position to the bottom as the size decreases? I've been using Material UI but haven't found any guidance on how to achieve this. .my-photo{ height: 300px; positio ...

cssmaterial-ui

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...

javascriptjqueryhtmlcssajax

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

Tips for adjusting the position of the sidebar with a grid system

I am working with a traditional design: #divleft{ float:left; } #sidebar{ float:right; } @media screen and (max-width: 900px) { #divleft, #sidebar{ float:none; } divleft and sidebar are elements within panelb; Now, I am exploring ...

csscss-grid

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format. let _columns = []; let commonStyle = {"width":"20 ...

javascriptcssarraysreactjs

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

javascriptjquerycss

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays

How can I determine the mouse's location relative to the bottom right corner of the

Currently, I am in the process of writing jQuery code that will detect if the mouse is positioned near the bottom or right side of a window, and then adjust the tooltip's position accordingly. This becomes crucial because the table in which these tool ...

jqueryhtmlcss

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

htmlimageperformance

Error: Unable to access the 'classList' property of null in HTMLSpanElement.expand function

Encountering a minor issue with my javascript code. Following a tutorial for a seemingly simple task: link What I did: Adapted the HTML from the tutorial to fit my desired visual outcome while maintaining correct class and id attributes. Utilized identic ...

javascripthtml

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

Monitor the element's height for any changes and update it accordingly on a separate element

Is there a way to accomplish the following: I currently have a navigation bar with the class of "navbar-fixed-top", and I've also added a style of min-height: 50px; Beneath the navigation bar, I have a content section with a class style of padding-t ...

htmlcssangularjs

I'm curious about the method used to create this body fadeIn effect

Recently, I stumbled upon the website "". I must say, it is truly remarkable. I can't help but wonder how the content on this page is cleverly faded in and slides up. This specific page caught my attention: ...

javascriptjquerycssanimationcss-animations

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...

javascriptjquerycsstwitter-bootstrap

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

One way to automatically create unique reference numbers is to generate a random number between 1 and 99 and append it to a date format, such as YYMMDD. For example,

I have a code that generates numbers like 030317-001 to 030317-010 in a list. How can I modify it so that the same sequence is generated with just one button click, without any repeats, up to a maximum of say 030317-099? <?php $x = date("dmy");// ...

phphtml

Strange Behavior of HTML5 Audio Elements

I'm currently in the process of designing a shop website with a nostalgic Windows98 theme. On the product's page, I want to include a preview of audio. Here is the CSS code that I have used for the HTML5 audio element: audio::-webkit-media-contr ...

htmlcssaudio

Can CSS3 animations be executed sequentially for each child element?

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

cssanimationcss-transitions

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent