CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code :

.logo {
  display: inline-block;
  width: 30px;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}
<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="logo.png" alt="" class="logo">
  <img src="picture.jpg" alt="" class="picture">
</div>

Upon hovering .container, I want .logo to be at opacity:1 and .picture to be at filter: brightness(0.7).

Applying those properties individually at .container hover makes each work. However, trying to set both properties causes only the filter to work.

htmlcss

Answer №1

Changing the position to relative from absolute will ensure that both images are displayed correctly. In the original code, one image was not showing up as expected. (I used my own images and added a picture class to resize the image)

The transition effect is working perfectly!

Check out the updated code below:

.logo {
  display: inline-block;
  width: 100px;
  //height:auto;
  position: relative;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.picture {
  width: 500px;
  height: auto;
  float: left;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}
<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
  <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>

Check out the Fiddle here

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

"Encountering an issue with AngularJS where the selected ng-model value is

I'm utilizing plain options for the select tag because I only need to display a few options when they meet a certain condition. In order to perform other operations, I require the value of the selected dropdown in the controller. However, the issue is ...

javascriptjavahtmlangularjs

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

htmlangulartypescript

Having difficulty connecting images or photos to CodePen

I've been attempting to connect images and sound files to my CodePen project using a Dropbox shared link. <div class="container"> <div class="row second-line"> <div class="col-12"> <div d ...

javascripthtmlcssdropboxcodepen

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

jqueryhtmlmenutoggleslidetoggle

Using FEWER loops to create column classes on Twitter - What is their functionality?

Bootstrap utilizes various LESS mixins to create its column classes, along with other classes; .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index} ...

csstwitter-bootstraploopsless

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Recently, I encountered an intriguing and frustrating bug in WebKit browsers. Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. ...

javascriptjqueryhtmlcss

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

The HTML div element is not expanding to the full width of the screen on an iPhone device

Recently, I encountered an issue while testing my website on the iPhone. The footer was not covering the full width, especially on Safari browser. After some digging, I realized that the problem might be caused by an absolutely positioned DIV called #leaf- ...

htmliphoneioscss

Looking to access a variable in Python Flask before it is referenced

I encountered an issue while trying to reference the variable "found_user," an object of the User class; it is defined within an if statement when a user logs in to the home page for the first time. My intention is to utilize the user's id to generate ...

pythonhtmlflask

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

When I utilize *ngContainerOutlet to dynamically insert components, it wraps the component's template within an ng-component tag which causes my CSS styles to become ineffective. For example: <div class="my-class"> <ng-container *ngComp ...

cssangularcomponents

React Div Element Not Extending to Web Page Margin

creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...

htmlcssreactjsreact-nativeweb-testing

Tips for inserting an image within a horizontal list of items

Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom. I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is t ...

htmlcsstwitter-bootstrap-3

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

Tips for aligning buttons vertically within the form-row class in Bootstrap 4

I'm facing an issue where I cannot get a set of buttons in line with labels when using different column widths in Bootstrap. The behavior of a button assigned to a specific column width, like col-3, is not the same as a button assigned with automatic ...

htmlcssbootstrap-4

Guidelines on creating actionable functions using JavaScript

Having trouble connecting the form to the database and looking for a solution. This is the HTML form that I've been working on, attempting both POST and GET methods. <form id="register" action="script/register.js" method="post"> <label for= ...

javascriptjqueryhtml

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

javascripthtmlcanvastransparencykineticjs

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

cssangularjsjsoncordovaionic-framework

Centering a Font Awesome icon within its parent element

Below is the code I am using: <div style="width:60px; height:60px; background-color: lightgrey;"> <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;"> <i class="fa fa-lg fa-play" aria-hidden="t ...

cssfont-awesome

"Include a song in a playlist without the need to sign in - Spotify API

I am looking to create a playlist where users on my website can collaborate, even if they are not logged into Spotify. I want these users to have the ability to add songs to the playlist. Below is the Ajax code snippet that I have: $.ajax({ dataType: &a ...

jqueryhtmlajaxspotify