Home Replace image in an <img> with CSS

# Replace image in an <img> with CSS

user32182
1#
user32182 Published in May 27, 2018, 3:33 am
 I'm trying to create an hover state on a logo following this article from CSS-tricks, but I'm unable to make it work. I'm using a WordPress theme where I can only edit the CSS (and JS but I don't know anything about that). CSS-Tricks code : HTML  Really Cool Page
 CSS /* All in one selector */ .banner { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://notrealdomain2.com/newbanner.png) no-repeat; width: 180px; /* Width of new image */ height: 236px; /* Height of new image */ padding-left: 180px; /* Equal to width of new image */ }  Website I'm working on HTML 
 My extra CSS .logo:hover img { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://couill.art/wp-content/uploads/2018/05/logo-Couillart.gif) no-repeat; width: 50px; /* Width of new image */ height: 50px; /* Height of new image */ padding-left: 50px; /* Equal to width of new image */ }  I tried playing with the settings but I'm running out of ideas.