On Image Hover, Blur and Show Alt Text

[jjmil03]

Hello,

I am attempting to use the following to add text over my image: https://theme.co/apex/forum/t/image-overlay-with-text/24600.

However, I only want the text to appear when I hover, and also, when hovering, I would like the image to blur slightly so that the text becomes more readable. Here is the code I am currently using (mostly copied from the above link):

JS:

jQuery('.textoverimage').each(function() {
	jQuery(this).append('<span class="img-desc">' + jQuery(this).find('img').attr('alt') + '</span>');
});

CSS:

.textoverimage:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(4px);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

I would like the text to inherit my font, and to be centered on the image as well. Any help would be appreciated. It sort of works, but I’m missing something. Thanks!

Jon

[jjmil03]

For some reason as well, the images move upward on hover as well. I’d like them to stay in their positions. Thanks!

Jon

[Alaa]

Hi Jon,

These are the two CSS values you need to change in the snippet above:

.textoverimage:hover {
    transform: translate(-50%);
    position: relative;
}

I’m a little bit confused regarding which text you want to move in the center of the image on hover? the image description or the text element below the image?

Thanks.

[jjmil03]

I have the alt-text for each image set. When I hover over the image, I would like that text to display on top of the blurred image. Once I get that working, I’m going to delete the text element. It was just there as a placeholder. Does that make sense? Thanks!

[jjmil03]

Your CSS did fix the first part. Thanks!

Jon

[Alaa]

Hi Jon,

Then, you can add this CSS code to (Theme Options > CSS):

.e413-19 .x-column span {
    display: none;
}

.x-column:hover > span {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 40%;
    color: #fff;
    left: 30%;
    width: 70px;
    text-align: center;
}

And this JS snippet to (Theme Options > JS):

jQuery( document ).ready(function() {
	jQuery('.x-image.textoverimage img').each(function (index, value){
	  var alt_text = jQuery(this).attr('alt');
		jQuery(this).parent().parent().prepend('<span>'+alt_text+'</span>')
	});
});

P.S. It’s better to give this row a custom class and replace e413-19 in the code above with this custom class name:

Thanks.

[jjmil03]

Thanks. I found though that there was a slight error in the code above. For the second part of the CSS, I added the following and it seemed to correct the issue:

**.CLASS NAME** .x-column:hover > span {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 40%;
    color: #fff;
    left: 30%;
    width: 70px;
    text-align: center;
}

Without adding the class, I found that it was messing with most of my pictures on the site. This seemed to fix it - but if you can verify that is a fix, I would appreciate it - my CSS skill is bad lol. Thanks!

Jon

[Alaa]

Hi Jon,

Yes, you are correct, I’m glad you managed to get this one sorted out.

Thanks.