CSS hover pseudo class causing issues with element positioning

I'm currently working on a basic web page project to practice my HTML and CSS skills. I have added a hover pseudo class for the croissant image, but when I hover over it, the coffee cup image unexpectedly shifts to the right by around 50 to 100 pixels. Once I move the cursor away from the croissant, the coffee cup returns to its original position. I am relatively new to web design and only started learning a few days ago. Here is the code snippet:

body {
  margin: 0px;
  background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
  background-size: cover;
}

#img1 {
  background-repeat: no-repeat;
  width: 100%;
  height: 40%;
}

#instagram1 {
  width: 20px;
  height: 20px;
  float: left;
}

#instagram2 {
  width: 20px;
  height: 20px;
  position: relative;
  right: 168px;
  top: 5px;
}

#bakery {
  color: black;
  float: left;
  position: relative;
  bottom: 15px;
  left: 5px;
}

#cafe {
  color: black;
  float: left;
  position: relative;
  right: 75px;
  bottom: 10px;
}

div {
  width: 200px;
  height: 60px;
  float: right;
  position: relative;
  top: 550px;
  background-color: #b3d9ff;
}

#croissant {
  width: 200px;
  height: 100px;
  position: relative;
  left: 1100px;
  top: 250px;
}

#espresso {
  position: relative;
  top: 280px;
  right: 150px;
  width: 200px;
  height: 150px;
}

#croissant:hover {
  width: 250px;
  height: 150px;
}
<img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">

<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">

<div>
  <img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="bakery"> @red.bakery </p>
  </br>
  </br>
  <img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="cafe"> @red.cafe </p>
</div>

htmlcsscss-selectors

Answer №1

Let's dive into the details:

  1. Understanding Relative Positioning
    ...
    When a relative positioning attribute like 'top: 10px;' is applied to an element, it shifts its position 10 pixels down from its normal placement.
    ...
  2. Exploring Absolute Positioning
    ...
    Absolute positioning involves setting the location using top, left, bottom, and right attributes, which are relative to the nearest parent element with relative or absolute positioning. If no such parent exists, the reference point defaults to the page itself.
    ...

The answer by Muhammad Zaib provides further insights along with a demo:

body {
  margin: 0px;
  background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
  background-size: cover;
}

#img1 {
  background-repeat: no-repeat;
  width: 100%;
  height: 40%;
}

#instagram1 {
  width: 20px;
  height: 20px;
  float: left;
}

#instagram2 {
  width: 20px;
  height: 20px;
  position: relative;
  right: 168px;
  top: 5px;
}

#bakery {
  color: black;
  float: left;
  position: relative;
  bottom: 15px;
  left: 5px;
}

#cafe {
  color: black;
  float: left;
  position: relative;
  right: 75px;
  bottom: 10px;
}

div {
  width: 200px;
  height: 60px;
  float: right;
  position: relative;
  top: 550px;
  background-color: #b3d9ff;
}

#croissant-wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  left: 1100px;
  top: 250px;
}

#croissant {
  width: 200px;
  height: 100px;
  position: absolute;
}

#croissant:hover {
  width: 250px;
  height: 150px;
}

#espresso {
  position: relative;
  top: 280px;
  width: 200px;
  height: 150px;
}
<span id="croissant-wrapper">
    <img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">
</span>

<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">

<div>
  <img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="bakery"> @red.bakery </p>
  <br/>
  <br/>
  <img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="cafe"> @red.cafe </p>
</div>

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

Can a div be relocated within another div based on a random roll of the dice?

Hey there, I'm currently working on creating a simple Monopoly-style game. As someone who is pretty new to JavaScript, I'm looking to figure out how to move the game piece around the board based on dice rolls. Any guidance or assistance would be ...

javascripthtml

What is the best way to create a "select all" check box in HTML and display the selected values in a div?

$(function () { //This function selects all checkboxes and unchecks selectall if any checkbox is not checked. var checkall = $('#checkall'); var boxes = $('input[type="checkbox"]').not(checkall); checkall.click(function ...

jquerycssxhtml

Issue with Bootstrap grid borders

I am currently working on a grid system that displays flight information in 10 columns, with a select button and price in 2 columns. I am facing an issue where adding a border to separate the select button section from the rest of the flight information on ...

htmlcsstwitter-bootstrap

Stop Sass from including property entirely

Within my current project, I have implemented a sass-mixin that looks something like this: mymixin.scss: @mixin customized_mixin($header-border-top-stack, $header-border-bottom-stack) { #some-id { border-top: $header-border-top-st ...

htmlcsssassmixins

Merge Various Ng-Loops

I am working with an HTML structure in which each child has varying lengths: <div ng-repeat='element in treeView'> <div ng-repeat='element1 in element.children'> <div ng-repeat='element2 in element1.chil ...

javascriptjquerycssangularjshtml

Adding fewer components to your current Angular 5 project

I have a JS Fiddle showcasing a CSS chart. How can I integrate LESS into my current Angular 5 project to make use of this chart? Also, where should I place the JavaScript and references to the LESS file from this example within my Angular component? The li ...

javascriptcssangularlessangular5

Ways to enhance the vertical size of an svg graphic using css

Currently, I am focusing on manipulating an svg image (as depicted in the screenshot with an arrow indicating four triangles) within the html code showcased below, pertaining to the webpage where I aim to increase its height. https://i.sstatic.net/Ycgp0.p ...

htmlcsssvgviewbox

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

Incorporate Web-GL sandbox effects into an HTML webpage

I am searching for a method to showcase a Web-gl shader obtained from GLSL Sandbox on the background of an HTML page. Yet, it seems there is no simple embeddable API available. How can I accomplish this task? Can I integrate this specific Shader into an H ...

javascripthtmlglslwebgl

Console not displaying any logs following the occurrence of an onClick event

One interesting feature I have on my website is an HTML div that functions as a star rating system. Currently, I am experimenting with some JavaScript code to test its functionality. My goal is for the console to log 'hello' whenever I click on ...

javascripthtmlcss

Leveraging JavaScript to enable automatic identification of buttons on a webpage

My website features specific buttons placed within articles and also in the head/body/footer sections. I have a plan to make it so that when a user clicks on a button, JavaScript code will determine if the button is inside an article or outside of it, then ...

javascriptphphtml

Is it possible to access an image's width and height in Jekyll Liquid syntax while iterating through a for loop, and then convert it to a JavaScript variable?

Is there a way to define a variable in Liquid logic that captures an image's width and height, which can then be passed to a JavaScript variable later on? Below are the steps my website takes before reaching the point where I need to use the image si ...

javascriptjqueryhtmljekyllliquid

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

htmlcssnav

Deleting a row from a table when a similar element is found in another location

My webpage features a table list that showcases users linked to an organization: <script type="text/html" id="userListTemplate"> <div id="user_list_box"> <table class="list" style="margin-bottom: 15px;"> {{#Users} ...

jqueryasp.nethtmlasp.net-mvc-3razor

Utilizing Django template tags in a web link

In the content of my .html file, I have this particular snippet: <ul> {% for file in files %} <li><a href="{% static 'notebooks/<**Part that needs to be dynamically referenced**>' %}">{{ file }}</a></ ...

pythonhtmldjangodjango-templates

Tips for customizing the appearance of the span tag within the option text of an HTML select

Unique Link In my current situation, I am facing an issue where the asterisk in the first option of my HTML select element should be displayed in red color. Despite my efforts to style it, the asterisk always appears in the default black color. I have pr ...

htmlhtml-select

I need to find a way to dynamically filter a Json object, taking into account that my filter condition may vary. The number of possible scenarios

I need to dynamically filter my data based on changing conditions. For example, I want to call a method on the <select (change)="filterData($event.target.value,'jobStatusId')" >, but the condition to filter by can be dynamic, such ...

javascripthtmltypescript

Is there a way to simulate pressing a keyboard button using jQuery?

Below is the code snippet: $("input").on({ keydown: function(ev) { if (ev.which === 27){ // esc button backspace_emolator(); } else if (ev.which === 8){ // backspace button console.log('backspace button ...

javascriptjqueryhtmleventskeyboard

The error message indicates a validation issue with the img tag: The attribute src has an invalid value, as it uses a backslash () as a path segment delimiter instead of

<div class="logo"> <img src="assets\images\main-logo\logo.jpg" alt="logo"> </div> </a> </div> The code was validated using validate.w3.org and this error was encountered: Bad value asse ...

html