Background image opacity with hover CSS

Create a menu option with background image with only css. On hover change opacity for the background image. Without affecting the text color.

.mainMenu .option {
width: 374px;
height: 248px;
display: inline-block;
border: 1px solid #d0d0d0;
vertical-align: top;
margin: 2px 2px 2px 0;
transition: border 250ms ease;
position: relative;
.mainMenu .transbox {
background: #fff;
opacity: 0.75;
width: 100%;
height: 248px;
.mainMenu a {
color: #181818;
font-size: 30px;
display: inline-block;
text-shadow: 0 1px 1px #909090;
position: absolute;
top: 100px;
left: 0;
width: 100%;
.mainMenu div:hover .transbox {
opacity: 0.1;
color: #000


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.