How can I simply make the background fade a bit while typing WITHOUT affecting the text opacity?. Without fading if you type over the top of the image it is hard to read. The reason I have not faded the image is I want it to looks strong, and then fade when typing.
Css:
.search-block #s {
background: #FFF url(../folder/images/logo.png) no-repeat top center;
background-size: contain;
width: 300px;
color: #000;
opacity: 1;
background-position: right 50px top;
}
.search-block #s:focus {
color:#000;
//opacity: 0.5; //if this is set the field fades like i want but is dark and not white like i want
}
.search-block .search-button {
background: #2F2F2F;
opacity: 1;
border-right: none;
}
HTML:
<div class="search-block">
<form method="get" id="searchform" action="...">
<button class="search-button" type="submit" value="..."></button>
<input type="text" id="s" name="s" value="..." />
</form>
</div>
Edit a varient of @Hynes solution:
I didn't add in the transitions here just to show base css that got it working perfectly:
.search-block {
display: block;
position: relative;
}
.search-block:after {
background: #FFF url(../folder/images/logo.png) no-repeat top center;
background-size: contain;
background-position: right 50px top;
color: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
content: "";
}
.search-block #s {
background-color: rgba(255,255,255,0);
width: 300px;
color: #000;
opacity: 1;
}
.search-block:hover #s {
background-color: rgba(255,255,255,0.5);
color: #000;
}
.search-block #s:focus {
background-color: rgba(255,255,255,0.8);
color: #000;
}
.search-block .search-button {
background: #2F2F2F;
opacity: 1;
border-right: none;
}
.search-block:hover .search-button{
color: #FFF;
opacity: 1;
}
Here is the fiddle to the original solution: Fiddle