Expand the image size when hovering using CSS

I want to make a simple image link button that enlarges when I hover over it. The code below accomplishes this, but I also want to move the paragraph when the image gets larger.

Any suggestions on how I can select and move the paragraph when I hover over the image?

<div id="rightImage">
      <a href="http://blabla.com" target="_blank"> <img src="images/image.jpg" alt="image" onmouseover="this.className='mouseOver'" onmouseout="this.className='mouseOut'" /></a>
      <p>paragraph</p>
      </div>


#rightImage
{
    width:275px;
    height:275px;
    float:left;
    position:relative;
}

.mouseOver
{
    width:300px;
    height:300px;
    top:-40px;
    z-index:1;
    position:absolute;
    box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}

.mouseOut
{ 
    width:275px;
    height:275px;
    float:left;
    margin-right:52px;
    box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
 }
htmlcss

Answer №1

This expands the image, increases the shadow size, and ensures the <p> element remains visible.

(UPDATE: I neglected to encode the angled brackets around the p)

Maybe this is what you're looking for?

<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style>
#rightImage
{
    height:275px;
    float:left;
    position:relative;
    box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}
#rightImage:hover img
{
    height: 300px;
    box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
}
 </style>
</head>
<body>
    <div id="rightImage">
        <a href="http://blabla.com" target="_blank"> <img src="img/redBaron.jpg" alt="image"/></a>
        <p>paragraph</p>
    </div>
</body>
</html>

Answer №2

Eliminate the position:absolute style declaration 

.mouseOver
{
    width:300px;
    height:300px;   
    z-index:1;    
    box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}

See a demonstration at http://jsfiddle.net/aRv2M/2/

Answer №3

Give this a try and hopefully it will be of help to you.

<div id="leftImage">
  <a href="http://example.com" target="_blank"> <img src="images/picture.jpg" alt="picture" width="275px" height="275" /></a>
  <p>text</p>
  </div>​​​​​​​​​​​​​​​​​​​

apply the following styles

#leftImage{
width:275px;
height:275px;
float:left;
position:relative;}

#leftImage:hover{
width:300px;
height:300px;
top:-40px
z-index:1;
position:absolute;
box-shadow:2px -2px 10px 3px #888, inset 2px -2px 10px 3px #888;
}

#leftImage:hover p {
position:relative;
margin-top:30px;}​

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

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

Get rid of the underlined anchors in your email signature

I'm currently in the process of creating personalized email signatures for one of my clients. At this point, I am testing them on various platforms such as GMail, Hotmail, Brinkster, and more. One issue I am facing is trying to remove the underline t ...

htmlemailgmailsignaturehotmail

Tips for hiding a bootstrap modal in Angular4 when it has no content

I am currently working on an Angular 4 e-commerce application. One of the requirements is to hide a bootstrap modal when there are no products in the cart. When a user selects some products, they are added to the mycart modal screen. The user also has the ...

angularhtmltypescriptbootstrap-4

What is the best way to retrieve the name of a dynamic form in a Controller

How can I retrieve the dynamic form name in my controller? See below for the code snippet: HTML <form name="{{myForm}}" novalidate> <input type="text" ng-model="username" name="username" required/> <span ng-show="(submit & ...

javascriptangularjshtml

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

javascriptphphtmlcssiframe

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

htmlcssmenu

How can HTML be added in CodeBehind using C# in a WebForm?

I have a method that generates tools based on the number value inserted, and I also have another control called "DateTimePicker" that provides a textbox and date+time picker function. However, the issue arises when I call the dynamic_tools method and inse ...

c#htmlasp.netwebwebforms

Footer overlapping occurs on a single page

My webpage is having an issue where the footer is overlapping. It seems to be fine on all other pages except for this one. I would prefer not to make any changes to the footer since it's working correctly on other pages. Is there a way to adjust the C ...

phphtmlcss

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

Having trouble with a broken link on your HTML email button?

I'm attempting to add a button to an HTML email that redirects to a link within an href tag. Admittedly, my knowledge of html code is minimal. Here's what I've attempted: <p> <input style="width: 200px; padding: 15px; box-shadow: ...

htmlbuttonhtml-emaillocation-href

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

phpjavascriptjqueryhtmlforms

How can I use jQuery to vertically align an element?

Here's my website: Take a look here! I have a menu on the left column that I want to center. Take a look at the image below for a better understanding of what I'm trying to achieve. https://i.stack.imgur.com/ZzprT.png Here is the JavaScript c ...

javascriptjqueryhtmlcss

The variation in CSS output between Google Chrome on Windows and Ubuntu

My code includes a div tag: <a href="#"><div class="field btn half green" id="register-btn">Register</div></a> Here is the CSS code for the tag: .field { position: absolute; width: 205px; left: 22px; color: #eaeae ...

htmlcsswindowsgoogle-chromeubuntu

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

javascriptjqueryhtmlcsstwitter-bootstrap

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js

Ways to showcase database content in ejs or html by utilizing Node.js, MongoDB, and Mongoose

I have successfully set up a Nodejs/Mongo/Mongoose database that can fetch and display data onto a page. However, I am encountering difficulty in displaying the fetched items in HTML, specifically in a table format. Below is the code for creating entries ...

htmlnode.jsmongodbmongooseejs

Tips for retaining filled data after an incomplete form submission

<html> <head><script type="text/javascript"> function pa(){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document. ...

javascripthtmlajax

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

javascripthtmlcss

Is it possible to include two functions within a single HTML script?

On my webpage, there are multiple tabs that display different sets of data. Below is the code for handling the functionality of these tabs: function openTab(event, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassNa ...

javascripthtml