Viewing Opacity image but not text on hover

Opacity image but not text on hover



User: Ralf E. 6 years ago
Hi there, I have a problem with the code. Maybe someone knows a solution.
The image should be transparent with an opacity-hover-effect but not the text. The text should get a new color but should not be transparent. In my code, the image and the text becomes transparent on hover.

<div class="gallery">
<div class="gallery-image">
<img src="{!-ASSETSPATH-!}Images.jpg" width="300" height="220"/>

<div class="gallery-text">
<h1>TEST</h1>
</div>
</div>
</div>

<style>
.gallery {
width:300px;
height:220px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}

.gallery-image{
position: relative;
display: block;
}

.gallery-text{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
text-align: center;
font-family: OpenSansCondensed-Light;
vertical-align:middle;
line-height:220px;
}

.gallery-text h1{
color:#FFFFFF;
font-size: 32px;
display: inline-table;
vertical-align:middle;
line-height:100%;
}

.gallery-text:hover h1{
color: blue;
}

.gallery-image:hover{
opacity: 0.6;
}

Last edit 6 years ago
User: Roddy 6 years ago
This is rather out of date coding. It would be better to use an HTML5 figure element for this.

Using your code, I have removed the gallery-text div from the gallery-image div since it is an overlay and not part of the image div...

<div class="gallery">
<div class="gallery-image">
<img src="bus.jpg" width="400" height="300">
</div>
<div class="gallery-text">
<h1>TEST</h1>
</div>
</div>

I've made a few changes to the styles. The main one being having the gallery-text div having a transparent background on page load and then applying - background:rgba(255,255,255,0.6) - on hover. Change the rgb colors and opacity as required.

<style type="text/css">
.gallery {
width:400px;
height:300px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.gallery-image{
position: relative;
display: block;
}
.gallery-text{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 300px;
background:transparent
}
.gallery-text h1{
margin:0;
padding:0;
color:#FFFFFF;
display:block;
font-family:Verdana, sans-serif;
font-weight:normal;
text-align: center;
vertical-align:middle;
line-height:300px;
}
.gallery-text:hover h1{
color: blue;
}
.gallery-text:hover{
background:rgba(255,255,255,0.6)
}
</style>

Note how you need to change the values for height and width in three places (once in the HTML and twice in the styles) and the value for line-height in one place.

A more modern approach to styling would give better results and more options like THIS.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
I have added a page to the Code Snippets to demonstrate an image hover effect using an HTML5 figure for better SEO and CSS transitions to smooth out the hover transitions.

If you need the caption to appear on page load, give the figcaption a font size greater than zero and change the background from transparent to and rgba color with the required opacity.

Note the use of media queries to get the caption to appear on page load if the item is viewed on a tablet device. Unless you have a separate version of the site for tablets, it's really important to provide alternatives to hovers on your full site as well as increasing the size of all links to at least 32px x 28px.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ralf E. 6 years ago
Thank you Roddy. It works perfect and looks great.


Post Reply
You must login or signup to post.