One generous member of our online community shared a CSS rollover code that is "fluid" and can adapt to different browser sizes. The code is provided below, along with a link to JsFiddle:
CSS
.container {
width: 100%;
height: 300px;
background: #f1f1f1;
}
a.widgetbook {
display:block;
max-width: 369px;
max-height: 85px;
width: 100%;
height: 100%;
background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
margin-bottom: 6px;
background-size: 200%;
}
a.widgetbook:hover {
background-position: right top;
}
HTML
<div class="container">
<a href="#" class="widgetbook">
</a>
</div>
I am interested in adding a fade-in CSS transition to properly position the rollover image and have it fade in with an opacity of 1. While I have been able to do this with a standard button, I am seeking guidance on how to implement it with the responsive button mentioned above. Any assistance on achieving this would be greatly appreciated.
Thank you!
D