Tips for handling the attribute selector with the hover pseudo-class

https://i.sstatic.net/nIsC7.pngHey there, I'm new to CSS! For a homework assignment in my class, I need to create a box with 4 images. When I hover over an image, it should enlarge and display in the center of the box.

Each image has two files - a small one starting with "th" and a big one starting with "big". This task requires me to work on the attribute selector.

I tried implementing something for this task, but for some reason, it's not working as expected.

 
    body>div {
      width: 100%;
      height: 800px;
      border: 2px solid black;

    }

    div {
      position: relative;
    }



    div>div {
      position: absolute;
      top: 200px;
      left: 400px;
    }



    img {
      display: block;
      margin: 20px 10px;
    }

    img[src*="th"] {
      width: 250px;
      border: 3px solid black;
      box-shadow: 10px 10px 10px #666;
    }

    img[src*="/big"] {
      display:none;
    }

    img[src*="th"]:hover {
      box-shadow: inset 10px 10px 10px #666;

    }

    img[src*="th"]:hover+img[src*="/big"] {
      display:block;
    }

 
   <div>

    <img src="/HTML/HW/HW27_5/thCar.jpg" alt="">
    <img src="/HTML/HW/HW27_5/thHome.jpg" alt="">
    <img src="/HTML/HW/HW27_5/thTree.jpg" alt="">
    <img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
    <div>
      <img src="/HTML/HW/HW27_5/bigCar.jpg" alt="">
    </div>
    <div>
      <img src="/HTML/HW/HW27_5/bigHome.jpg" alt="">
    </div>
    <div>
      <img src="/HTML/HW/HW27_5/bigTree.jpg" alt="">
    </div>
    <div>
      <img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
    </div>

cssattributeshover

Answer №1

Experiment with aligning the images side by side. Using the "+" selector only applies to adjacent sibling elements.

.outer-div {
  width: 100%;
  height: 500px;
  border: 2px solid black;
}
.outer-div {
  position: relative;
}

img {
  display: block;
  margin: 15px 10px;
}

img[src*="/100"] {
  border: 3px solid black;
  box-shadow: 10px 10px 10px #666;
}

img[src*="/200"] {
  display: none;
}

img[src*="/100"]:hover {
  box-shadow: inset 10px 10px 10px #666;
}

img[src*="/100"]:hover+img[src*="/200"] {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>
<div class="outer-div">

  <div class="inner-div">
    <img src="https://picsum.photos/100" alt="">
    <img src="https://picsum.photos/200" alt="">
  </div>
  <div class="inner-div">
    <img src="https://picsum.photos/100" alt="">
    <img src="https://picsum.photos/200" alt="">
  </div>
  <div class="inner-div">
    <img src="https://picsum.photos/100" alt="">
    <img src="https://picsum.photos/200" alt="">
  </div>
  <div class="inner-div">
    <img src="https://picsum.photos/100" alt="">
    <img src="https://picsum.photos/200" alt="">
  </div>

</div>

Answer №2

The + selector chooses an element that directly follows another element.

Therefore, your large image div must be positioned right next to the smaller image. To target the nested image, you need to use this selector 

img[src*="th"]:hover+div img[src*="/big"]
instead of 
img[src*="th"]:hover+img[src*="/big"]
.

body>div {
  width: 100%;
  height: 800px;
  border: 2px solid black;
}

div {
  position: relative;
}

div>div {
  position: absolute;
  top: 200px;
  left: 400px;
}

img {
  display: block;
  margin: 20px 10px;
}

img[src*="th"] {
  width: 250px;
  border: 3px solid black;
  box-shadow: 10px 10px 10px #666;
}

img[src*="/big"] {
  display: none;
}

img[src*="th"]:hover {
  box-shadow: inset 10px 10px 10px #666;
}

img[src*="th"]:hover+div img[src*="/big"] {
  display: block;
}

</style>
<div>

  <img src="https://dummyimage.com/250x50/f00&text=/th" alt="">
  <div>
    <img src="https://dummyimage.com/500x200/f00&text=/big" alt="">
  </div>
  <img src="https://dummyimage.com/250x50&text=/th" alt="">
  <div>
    <img src="https://dummyimage.com/500x200&text=/big" alt="">
  </div>
  <img src="https://dummyimage.com/250x50/0f0&text=/th" alt="">
  <div>
    <img src="https://dummyimage.com/500x200/0f0&text=/big" alt="">
  </div>
  <img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
  <div>
    <img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
  </div>

</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

Developing a custom styling class using JavaScript

Looking to create a custom style class within JavaScript tags. The class would look something like this: #file-ok { background-image: url(<?php echo json.get('filename'); ?>); } Essentially, the value returned from the PHP file (json ...

javascriptjquerycssajax

Steps for adding a ::after border to a div

Looking for a way to create a border line separator between the top and bottom sections? I've been struggling with this task, but I have managed to make progress by adding a white line. However, I'm facing an issue where the container's widt ...

csstwitter-bootstrapbootstrap-4

How can jQuery be used to style a single selected option with a unique color?

I have a dropdown menu with a default placeholder ("ex. Crawler Excavator") displayed in lightgray. I want only this placeholder to be in lightgray when selected, while all other labels should be black. Currently, I am able to color the selected item light ...

javascriptjquerycss

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

htmlcss

When trying to access a view through a controller, the CSS is failing to apply properly

I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...

csscodeigniterbase-url

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

Conceal the Bootstrap side navigation bar upon clicking anywhere else

Is there a way to make the side nav close when clicked outside of it while using my left side bar? Here is the code for my side nav: //side-nav is the class of my side nav //leftmenutrigger is my button on the nav bar that toggles the side nav Any sugg ...

javascripthtmlcssbootstrap-4

Button click not triggering JQuery datepicker functionality

Currently, I am facing an issue with the jQuery datepicker functionality. It seems to work fine when clicking on a button in Mozilla Firefox, but unfortunately, it does not function properly in Google Chrome or Internet Explorer. Can someone please provide ...

javascriptjqueryhtmlcssdatepicker

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

Leveraging CSS selectors for selecting odd and even elements

Can anyone offer some insight into my CSS odd and even selector issue? I can't seem to figure out how the gmail-message-wrapper is being targeted in my code. I want the 3 gmail-message-container elements to have alternating colors, but it's not ...

css

The correlation between dynamic pricing and surge pricing in relation to PX

I'm exploring the translation of measurements from dp and sp to pixels within Google's new material design for a website I'm working on. Usually, my web designs have used pixel-based measurements for both grid and font sizing over the four y ...

csshtmlpixelmaterial-design

Content not aligned in the center of the page on Internet Explorer

Recently, I've taken on the responsibility of managing the content for this website after it was passed down from the previous developer. Each page's content is contained within a div element with the class "ct", which has auto margins applied t ...

htmlcssinternet-explorerweb

What is the best way to conceal or eliminate slider increments and their corresponding labels in plotly.js?

Is there a way to eliminate or conceal the step ticks and labels of the animation slider? I want to get rid of the slider's step markers (ticks) and the corresponding labels: 'Red', 'Green' and 'Blue' located beneath the ...

javascriptcssplotlyplotly.js

Content in Bootstrap not filling entire mobile screen

The content in this form does not stretch to full screen on mobile phones, but it appears properly on computers and tablets. Please advise on how to solve this issue. https://i.stack.imgur.com/S2XkS.jpg <link rel="stylesheet" href="https://maxcdn.bo ...

phphtmlcssbootstrap-4bootstrap-modal

Implementing a watermark on a website - design and structure

I have a question regarding the addition of watermarks to web pages, such as using the logo of an internet provider. I'm not specifically looking for HTML or CSS code samples. One idea I had was to use a proxy server that would automatically add water ...

csshttpshtmlwatermarkproxy-server

Transform this color matching game into an image matching game using JavaScript and jQuery

I have a color matching game that I would like to enhance by matching background-images instead of just background-colors. However, I am facing difficulties in making this change. For instance, instead of matching the color red with the text "red," I wan ...

javascriptjqueryhtmlcss

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

javascriptjqueryhtmlcss

Toggle JavaScript Query Display

Welcome to my HTML test website where I am testing show/hide JavaScript functionality. Upon loading the page, you may notice that everything is hidden until a button is clicked. <html> <head><title>Test</title> <scr ...

javascripthtmlcss

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

cssangularangular-material