Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover.

      <div style="margin-top: 50px;" class="container imgzoom">
        <div class="row d-flex justify-content-evenly">
          <div class="col-md-2">
            <p class="text1">Lisbon, Portugal</p>
            <img data-bs-toggle="modal" data-bs-target="#2" src="img/2.jpg" class="img-fluid cardzoom rounded-2" alt="">
          </div>
        </div>
      </div>

.cardzoom{
  transition: .3s;
}

.cardzoom:hover{
  transform: scale(1.1)
}

Could you help me resolve this issue?

htmlcssbootstrap-5

Answer №1

Why not give this a try:

.gallery {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery img {
  width: 100%;
  transition: 0.3s;
}

.gallery p {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -50%;
  margin-top: 50%;
  left: -10%;
  margin-left: 50%;
  z-index: 10;
}

.gallery:hover img {
  transform: scale(1.1);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="543736363d2a2c393932673637342d52603d353d342936111b38">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-top: 50px;" class="container gallery">
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-2 card-group">
      <p class="text1">Tokyo, Japan</p>
      <img data-bs-toggle="modal" data-bs-target="#2" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVEhUVFRQYGBgaGBoaFxsbGRkaFxcXFhcaGRwbIR8iHBssJyEnJzscKywrMi4xNTU1HCFeOzs7QDs0Py40NTEBAQAAAAEAVPIiJgAACkgAAAAAAAAABACAZQEAAKMAAAAAAAAAAEANXbkHAAYOmgAAGjlAQv................ #truncated

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

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

Ways to trigger Bootstrap modal through a PHP GET call

I have been searching for a solution to create a modal similar to this one, but I haven't found anything yet. My requirement is that when we pass true in a GET request, the modal should be displayed. Otherwise, if there is no value specified in the $ ...

javascriptphphtmlbootstrap-modal

Formulate a jQuery array consisting of droppable components

I have successfully implemented draggable li-elements and droppable boxes using jQuery UI. Here is my structure: A list of 3 different permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edi ...

jqueryhtmlarraysjquery-uidroppable

Sending data from an HTML textarea to a PHP variable without user input

After spending more than two days searching for a solution to this problem, I am now reaching out directly with my question. Although there have been some hints and partial answers, nothing has definitively resolved the issue I am facing, prompting me to m ...

javascriptphpjqueryhtmlcss

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

phphtmlcsstext

Ways to prevent users from manually inputting dates in date fields

I am currently developing an application and I need to prevent users from manually entering a date in the type=date field on the HTML page. I want to restrict users to only be able to select a date from the calendar display, which is in the format MM/DD/YY ...

javascripthtmlangularjs

Mastering CSS: Optimizing Div Placement Across Sections

I am currently working on developing a sleek and modern landing page with multiple sections, each designed to catch the eye. This style is all the rage at the moment, featuring large headers, ample padding, bold text, and a visually appealing divider betwe ...

htmlcssreactjsnext.jstailwind-css

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

htmlcsstwitter-bootstrapfootersticky

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

htmldoctype

Expand the div to fit one side of the browser

My bootstrap code looks like this: <div class="container"> <div class="row"> <div class="col-md-8">content</div> <div class="col-md-4"> <div class="map">map goes here</div> </div> </div& ...

htmlcsstwitter-bootstrap

How can I dynamically display Material-UI's <MenuItem/> within a <DropDownMenu/> using ReactJS?

In my ReactJS + Material-UI project, I am working with an array named colors that contains different color strings such as "white", "blue", and "green. My goal is to render each color string as a <MenuItem/> within a <DropDownMenu/> component ( ...

javascriptcssreactjsmaterial-ui

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

phphtmlcsswordpressadvanced-custom-fields

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

javascripthtmljsonapi

Altering various HTML components with every swipe of SwiperJS

I am new to working with JavaScript and I have integrated a Swiper JS element into my HTML page. Here is the current code I am using: <head> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css&quo ...

javascripthtml

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss

Leveraging JQuery for activating an event with Bootstrap Scrollspy

I'm facing a challenge in capturing the Scrollspy event to execute a specific function. The Scrollspy feature is functioning correctly in terms of updating the active link on the navbar. However, I am struggling to capture the event for use in other p ...

javascriptjqueryhtmltwitter-bootstrap-4

Reorganizing content under an image as the browser is resized by implementing a media query

In the footer section of my document, I have text positioned next to an image (floated to the right). However, when I resize my browser to a minimum width of 768px, both the text and image lose alignment. My goal is to centralize both elements with the ima ...

htmlcssmedia-queries

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

jquerycssmobileresizewindow

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...

javascripthtmlcss

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace