When hovering over the background, it will enlarge but the text in front will remain the same size

As the user hovers over the image, the image enlarges. However, there is also some information that needs to be displayed in front of the image.

This is my current implementation:

.home-about-link {
  overflow: hidden;
  width: 100%;
}

.home-about {
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  height: 300px;
  width: 100%;
  opacity: 0.8;
}

.home-about:hover {
  opacity: 1;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
  /* IE6 and 7 */
}

h2 {
  color: #fff;
}
<div class="home-about-link">
  <div class="home-about">
    <h2>ABOUT US</h2>
  </div>
</div>

Upon hovering over the image, the information (ABOUT US text) also enlarges. My goal is to keep the information font size unchanged while only scaling up the background. Is there a way to achieve this?

javascriptjqueryhtmlcsscss-transforms

Answer №1

You're looking to maintain the scale of the background without affecting the h2 element.

One approach is to scale back the h2 using a scale factor of 1/1.1 = 0.909 

.home-about:hover h2{
  transform: scale(0.909);
}

I'd love to hear your thoughts on this solution. Cheers!

.home-about-link {
  overflow: hidden;
  width: 100%;
}
.home-about {
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  height: 300px;
  width: 100%;
  opacity: 0.8;
}
.home-about:hover {
  opacity: 1;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
  /* IE6 and 7 */
}
h2 {
  color: #fff;
}
.home-about:hover h2 {
  transform: scale(0.909);
}
<div class="home-about-link">
  <div class="home-about">
    <h2>ABOUT US</h2>
  </div>
</div>

Answer №2

Are you expecting this result? Check the output in jsbin

Simply decrease the value of the 

-webkit-transform: scale(1.1)

to

-webkit-transform: scale(1);

Visit Jsbin for more

css

.home-about-link{
    overflow: hidden;
    width: 100%;
}
.home-about{
    background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    height: 300px;
    width: 100%;
    opacity: 0.8;
}
.home-about:hover {
    opacity: 1;
    transform: scale(1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1);<!----check the changes-------->
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1); /* IE 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

h2{
  color: #fff;
 }

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
     <div class="home-about-link">
      <div class="home-about">
        <h2>ABOUT US</h2>
      </div>
    </div>

</body>
</html>

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 issue with history.push() functionality not functioning as expected within Firebase's authentication system when used in conjunction

I'm currently working on setting up authentication using React, Firebase Auth, and Context API. signin.js import React, { useEffect, useState } from 'react'; import { Form, Button, Container, Card } from 'react-bootstrap'; import ...

javascriptreactjsfirebasefirebase-authentication

What is preventing jQuery from returning a string or text value?

index.html <button id="fetchGroupers">Fetch Groupers</button> <script type="text/javascript"> $(document).ready(function () { $("#fetchGroupers").click(function () { $.ajax({ type ...

asp.netjqueryajaxpost

Utilize JavaScript to reference any numerical value

I am attempting to create a button that refreshes the page, but only functions on the root / page and any page starting with /page/* (where * can be any number). Below is the code I have written: $('.refresh a').click(function() { var pathNa ...

javascriptjquery

Discover the method for tracking idle time with jQuery and PHP

I have a script that utilizes PHP sessions through a custom class. One of the methods in this class calculates the remaining seconds before the session expires. Whenever the user refreshes the page or opens a new one, the idle time counter is reset using ...

javascriptphpjquerytimeoutidle-timer

Experiencing a problem with the localhost connection

I've been trying to work on this issue using React and local host, but it keeps showing the direct file instead of the website. I've been stuck on this problem for the past 3-4 hours and still haven't been able to find a solution. I'm h ...

javascriptreactjs

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

javascripthtmlcss

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...

htmlcssangulartypescriptcss-grid

How can I pass standard HTML as a component in React?

I need help creating a Higher Order Component (HOC) that accepts a wrapper component, but allows me to pass standard HTML elements as inner content. Here is an example of what I want to achieve: type TextLike = string | {type,content} const TextLikeRender ...

javascriptreactjsnext.js

Show react-card-flip children conditionally based on a button, otherwise display one frontside and two backsides

Is it possible to achieve the following functionality using the react-flip-package? I have a card with two buttons on the front side. When I click one button, I want the card to flip to one backside, and when I click the other button, I want it to flip to ...

javascriptreactjsmaterial-ui

Developing a React Native app using Expo and Firebase? Learn how to prevent Firebase details from

I have encountered a problem with my code while working on the user edit profile page in my react native app. The issue I am facing is related to displaying the previously inputted firebase details from the collection in the text input fields when the user ...

javascriptfirebasereact-nativegoogle-cloud-firestoreexpo

Ways to retrieve the href attribute value from an element in Python/Selenium even when there is no explicit href attribute present

I am facing an issue with retrieving the URL link from an element using the get_attribute('href') method. It returns a null value, as if the element does not have a href attribute. webdriver.find_element_by_xpath('//*[@id="__next"] ...

pythonhtmlseleniumselenium-webdriverhref

JavaScript Filtering Technique

Attempting to compose an array of names for a search output page The json arrangement looks like this: data = { "artists": [ { "artistName": "a" }, { "artistName": "b" }, { "artistName": "c" }, { "artistName": "d" }, { "artistName" ...

javascriptarraysfilter

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

javascriptjquerypromise

I'm having trouble with my Express server routes not being accessed. The browser is displaying an error message saying 'No Data Received ERR_EMPTY_RESPONSE

I've encountered an issue with my express server while setting up an email service. Despite troubleshooting and simplifying the code to a basic 'hello world' example, the problem persists. No routes are functioning properly – requests made ...

javascriptnode.jsexpress

How to Change the Appearance of Elements in an Array Using React.js

My situation involves an array receiving data from an API, and I'm looking to customize each button's appearance by giving them different background colors. In addition, my project includes Material UI... Below is the snippet of code I have - {op ...

cssreactjsapimaterial-uitailwind-css

Guide to setting up Firebase pagination in a NextJS 13 server component

Currently, I am working on developing a product page that showcases all products and functions as a server component. The challenge I am facing is the inability to pass the last visible document snapshot required by the startAfter() query. Below is the fu ...

javascriptfirebasenext.jsserver-side-renderingreact-server-components

What is the most effective way to extract content values from different divs for calculation using jQuery?

I am working on creating a function that retrieves the content values from the <div class="rowtabela"> div and reads the nodes of <div class="item v_...">. Check out my code below: <div class="adicionados" id=& ...

javascripthtmljqueryajax

Guide to encoding data using a multidimensional array in JSON format

I have an array that looks like this: array { [0] => {"ID":"343","name":"John","money":"3000"} [1] => {"ID":"344","name":"Erik","money":"2000"} [2] => {"ID":"346","name":"Ronny","money":"3300"} } My goal is to transfer this data from ...

javascriptphpjqueryarraysjson

What is the correct way to make an image adjust to changes in a browser's size?

I'm in a bit of a quandary: How can I ensure that an image resizes properly based on viewport size? So, here's the challenge - I have an image that is 400 pixels wide and 400 pixels tall. My aim is for it to occupy only 90% of the width of the v ...

cssmobileresponsive-designmedia-queriesresponsive

The issue arises when the jQuery dataFilter function encounters an undefined

Currently, I am pulling data from an external API using JSONP with jQuery.ajax(). Below is my AJAX setup: var ajax_options = { dataType: 'jsonp', jsonp: 'callback', url: url, data: parameters, success: function (re ...

jqueryajaxjsonp