Implementing a dual hover effect on a Div element

I am working with HTML code that includes an image and text

<div class="subcontainer1">
    <img src="a.png" alt="" class="imgcolumn">
     <h3 class="header3">Hello</h3>
</div>

This setup places the content above the image.

I'm attempting to apply two different CSS effects on a single hover event.

Specifically, when hovering over a div with the class subcontainer1, I want the image to shrink and the text to grow.

CSS for shrinking and growing elements:

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

Is it possible to achieve this effect on hover, or am I setting my expectations too high?

javascriptjqueryhtmlcss

Answer №1

Is this the type of solution you were looking for?

.box:hover img { transform: scale(1.2); }
.box:hover h4 { transform: scale(0.8); }

Try it out: http://jsfiddle.net/6hLcs/

Answer №2

When hovering over .subcontainer1, you can apply a style to img or h3 like this:

.subcontainer1:hover img{
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }


    .subcontainer1:hover .header3{
       /*Your style*/
    }

Check out the demo here!

Answer №3

In html, the .grow and .shrink classes are not built-in, so to implement them, you need to add the following code:

.subcontainer:hover{
    /* css rules */
}

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

Polymer: Basic data binding is not functional in the second element

After dedicating 6 hours to this problem, I still can't seem to find a solution. Below is the code snippet from index.html: <flat-data-array availableModes="{{modes}}" id="dataArray"></flat-data-array> <flat-strip-view availableModes=" ...

javascripthtmldompolymerpolymer-1.0

What could be causing the target to malfunction in this situation?

Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...

javascripthtml

Tips for eliminating the PHP form redirection issue

Having trouble with data insertion in MySQL and getting redirected to the PHP file after. Not ideal! Any suggestions on how I can display error or success messages within the same HTML file? index.html <form id="form" action="add_article.php" method=" ...

phphtmlmysql

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Currently, I am utilizing fs.readdir to generate an array of filenames within a specific directory. Additionally, I have implemented some regex functions to filter out undesirable filenames and/or filetypes. Upon executing the code provided below, I succe ...

javascriptarraysnode.jsundefined

The JSON.stringify function is returning inaccurate index structures

I am attempting to use the JSON.stringify() method on my object (refer to the screenshot). However, the result I am getting is not what I expected - the indexes of the objects are in the wrong order. You can view the complete stringified JSON here: As y ...

javascriptjson

The Vue component does not render the JS Promise and instead displays it as

After setting up a promise that will be returned once a correct event is called with the correct action, I have the following code: import {EventBus} from "./EventBus"; export function completed() { EventBus.$on('queue-action', e => { ...

javascriptvue.jspromisees6-promise

The functionality of checking all checkboxes is not functioning properly within a custom function

function toggleTreeView(id) { $("#TreeUL" + id).slideToggle(function() { if ($(this).is(':hidden')) { $("#treeCollapse" + id).addClass("glyphicon-plus"); $("#treeCollapse" + id).removeClass("glyphicon-minus"); } else { ...

jqueryajaxnested-checkboxes

Confirm whether the Iterator type is the same as the AsyncIterator type

Is there a clever JavaScript technique to differentiate between Iterator and AsyncIterator without initiating the iteration process? I'm attempting to create a type checker like this: function isAsyncIterator<T>(i: Iterator<T> | AsyncIter ...

javascripttypescriptiterator

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two l ...

javascripthtmlcsssearchfilter

JavaScript Equivalent to C#'s BinaryReader.ReadString() Function

Currently, I am in the process of translating C# code into JavaScript. While transferring multiple datatypes from this file to matching functionalities found in various JavaScript libraries was relatively smooth, there is one specific function that seems t ...

javascriptc#typescript

Utilize a JSON file to generate a network visualization using the vis.js library

I am currently working with vis.js to generate a visualization. In the example code, I am using the file saveAndLoad.html. The save function works well as it allows me to export a json file. However, I am encountering an issue when trying to load the jso ...

javascriptjsonvis.js

I prefer to avoid using the "#" sign in URLs

<a href="#" onClick="load_page()">intro</a> I am trying to avoid displaying the # sign in the URL, and I would like it to appear like this instead: www.mydomain.com/ However, it currently displays as follows: www.mydomain.com/# Is there a ...

javascripthtmlajaxanchor

Navigate to a specific URL path and send properties as arguments in the function for handling events

I am working on a vuetify autocomplete search feature. When a user selects an item, I need to navigate to a specific route and pass some props along. However, my attempts to change the current route without passing props have resulted in errors. Here is w ...

javascriptvue.jsvuetify.js

`Send data to a C# controller function by utilizing <button> and jquery`

My bootstrap modal contains multiple buttons for downloading files in different formats. I can successfully trigger the controller method by setting the onclick function like this: onclick="location.href='@Url.Action("DownloadAsJPG", "Home")'" ...

c#jqueryasp.net-mvc

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

After updating the cell within the data grid, I encountered an issue where I could retrieve the ID and field using the prop selectedCellParams, but retrieving the modified value was proving to be challenging. In order to successfully execute the PUT reque ...

javascriptreactjsmaterial-uidatagrid

flexbox layout with a fixed sidebar that stays in place

Is there a way to make the sidebars in the holy grail layout sticky using flexbox? Specifically, I want the aside and nav sections of the HTML to stop scrolling down further once the last element is reached. I've tried various methods but with limited ...

cssflexbox

Using the Github API in javascript, store an image as an image by saving its base64 Data URL

I have a base64 encoded Data URL of a webp image that looks like this: data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs= My goal is to push this image to GitHub using their API in the form of a webp image. To clarify, I want to achi ...

javascriptnode.jsimagegithub-api

Exploring the Power of jQuery Ajax Requests

Currently, I am making an Ajax call from site.com/users/{username} I need to access the url site.com/account/deleteComment, but when I check in fireBug it seems to be trying to access site.com/users/account/deleteComment Below is the code snippet: $ ...

jqueryajaxforms

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

javascripthtmlcss

Having trouble with PHP form not functioning correctly?

Is there a way to display the var_dump with the 'selected country' information? I am having trouble due to an issue with the $res (array) $id. <?php if(isset ($_POST['submit'])) { $id = $_POST['cata']; $api = new ...

phphtml