Alignment issues with images

I am trying to put together a collection of images that function as links and light up when hovered over. However, my attempt to add a <div class="hover"> in front of each image caused them to no longer display in a horizontal line. How can I resolve this issue so that they remain in a horizontal row?

.hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.hover:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
<body bgcolor="#000000">

<ul class="list-inline">
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
            </div></li>

Apologies for any messy code or unclear explanation, this is my first time posting.

Thank you

htmlcss

Answer №1

By default, divs are block-level elements and take up the full width available. If you want to change this behavior to inline, simply add display: inline; to your hover class:

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  display: inline;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>

Another method is to float the .hover divs to the left using float:left:

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  float:left;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>

Answer №2

One issue is that each image is wrapped in a div element, causing them to take up an entire row due to being block-level elements. However, by changing the display property to inline, you can make a block-level element behave like an inline element. For example, display: inline;

.list-inline{
   text-align: center; 
}

.hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    display: inline;
}

.hover:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    cursor: pointer;
}
<body bgcolor="#000000">

<ul class="list-inline">
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
            </div></li>

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

Ways to identify when a browser has disabled JavaScript and present a notification

Is there a way to detect if JavaScript is disabled in the browser and show an error div instead of the body? ...

javascriptjqueryhtmlnoscript

Place an image at the center with a height set to 100% within a div that has a fixed height and

Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...

javascripthtmlcss

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

javascriptjqueryhtmlcss

Encountering difficulty extracting information from JSON file within AngularJS factory

I am struggling with a Json file named discover.json located at json-files/discover.json {"data": [ {"username": "aky123", "name": "ajay"}, {"username": "sky123", "name": "sanjay"} ]} Below is my factory setup: var myAppServices=a ...

javascriptangularjsjsonhtml

CSS: Element with overflowing content fails to display even with the overflow set to visible

I'm trying to enhance a fixed toolbar by adding a dropdown menu, but the .toolbar-dropdown-menu component isn't displaying correctly, as shown in this screenshot (tested on Google Chrome 80.0): https://i.stack.imgur.com/r5Cz0.png Initially, it ...

htmlcssoverflow

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

I am facing an issue with an element in my code, which is as follows: <a ng-click="vm.openPage(page)">{{page.pageId}}</a> Within the vm.openPage() function, there are validations that need to be performed before redirecting to the page refere ...

javascripthtmlangularjs

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Below is the HTML snippet I am working with: <!-- Parent checkbox code goes here --> <input id="ckbCheckAll" class="custom-check ez-hide" type="checkbox" name=""></input> <!-- Child checkbox codes follow --> <input id="practice_ ...

javascriptjqueryhtmlcheckbox

"An issue with IE9 causing small dots on rounded corners during rendering

Help Needed: Strange IE9 Rendering Issue I'm experiencing an odd rendering problem in Internet Explorer 9. You see those little white dots on the left? What could be causing them? Any suggestions on how to remove them? Microsoft, why always so myst ...

jquerycssinternet-explorer-9

Single parallax movement determined by the position of the mouse cursor, with no margins

Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single ...

javascriptjquerycsshtml

Updating the background image without having to validate the cache

I have implemented a basic image slideshow on my website using a simple Javascript function. The function runs every 5 seconds to update the CSS "background-image" property of a div element. While it is functional, I've noticed that each time the func ...

javascriptcss

Pass information from a row to an AngularJS controller upon clicking the checkbox within the row

I need help with some HTML code that utilizes AngularJS to display a table. Each row in this table contains a checkbox. Here is a snapshot of the table layout: https://i.sstatic.net/ibDor.jpg Below is the actual HTML code: <div ng-app ng-controll ...

htmlangularjscheckbox

The Google API is experiencing issues when using input that has been added on

Situation: In my attempt to integrate a Google address search feature into an online shopping website, I encountered a challenge. I don't have direct access to the website's HTML code, but I can insert code snippets in the header, footer, and in ...

javascripthtmlgoogle-mapsgoogle-api

Update the page using Ajax without relying on jQuery

I want to implement automatic page updates without the need for a refresh using Ajax. However, most resources I've come across suggest using jQuery and PHP, which are areas of coding I am not very familiar with. My goal is to integrate Ajax into my HT ...

jqueryhtmlajax

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...

javascriptjqueryhtml

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

This is the current situation: There is a checkbox on each row of a table that represents some information An initially disabled button becomes enabled when any checkbox is checked The button is enclosed by an <a></a> tag as shown: <a>&l ...

javascriptphphtmljqueryajax

browsersync fails to refresh when alterations are made in the .css files

Why is browsersync not injecting the css correctly? Here is my code: const gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync ...

cssgulp

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

How can I center one middle position for my inputs and have the span align to the left?

How can I center my input fields with all the spans aligned to the left? I would like the inputs to be centered on the page, with supporting spans aligned to the left or right of the input lane. I am utilizing some Bootstrap 4 classes for this layout. C ...

htmlcssbootstrap-4

What is the best method for implementing a dropdownlist submenu in yii2?

I am facing an issue with the yii2 field class dropdownlist submenu. Can someone guide me on how to create a submenu or subselect list in a dropdownlist? https://i.sstatic.net/Arz6O.jpghttps://i.sstatic.net/jqXIh.jpg Here is my database schema: +-------- ...

phphtmldrop-down-menuyii2html-select

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

javascriptcssdom