[pkingcoParticipant]

Hi Guys,

I’ve searched but I just can’t find the answer to this one. Probably something simple I’m missing.

So I have a team section with images six across. I built this using three column shortcode within a two column row in cornerstone.

I’ve set up a text-on-hover feature using custom css, but when I rollover one of the images, all the images in the column shortcode are effected. I’d like to only have the image being rolled over effected.

I may be doing a poor job explaining this. Below are my specs and I’ll respond with login info incase.

Wordpress version: 4.7.3
X theme version: 4.6.4
Cornerstone version: 1.3.3

Thanks

Garet

[pkingcoParticipant]

This reply has been marked as private.

[RupokMember]

Hi Garet,

Looks like your shortcode is broken for this Row. Check the code and do the same as above Row.

Thanks!

[pkingcoParticipant]

Thanks for getting back to me so fast!

Sorry for being dense here but the above row was block grid and that wasn’t working on mobile (stacked funny) so I moved to columns. The only short code in the block grids is the image.

I’m not seeing where the shordcode is broken. Code below.

————

[column type="1/3"] [image src="http://avfx.live/wp-content/uploads/2017/02/Murray-Lapides-BW-REV2-2-e1357571897270-300x300.jpg" link="true" href="http://avfx.live/about-us/murray-lapides/" title="Murray Lapides!" alt="Murray Lapides" style="margin-bottom:0px"]<a href="http://avfx.live/about-us/murray-lapides/">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Murray Lapides<br>Founder & CEO<br>[x_icon type="search-plus"][/custom_headline]</a> [/column] [column type="1/3"] [image src="http://avfx.live/wp-content/uploads/2017/02/Steve-Halling-BW-REV2-1-300x300.jpg" link="true" href="#example" title="Hey There!" alt="Text" style="margin-bottom:0px"]<a href="http://avfx.live/about-us/steve-halling/">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Steve Halling<br>President<br>[x_icon type="search-plus"][/custom_headline]</a>[/column] [column type="1/3" last="true"] [image src="http://avfx.live/wp-content/uploads/2017/02/Tom-Peckham-BW-REV2-71-300x300.jpg" link="true" href="#example" title="Hey There!" alt="Text" style="margin-bottom:0px"]<a href="http://yoursite.com">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Tom Peckham<br>General Manager<br>[x_icon type="search-plus"][/custom_headline]</a>[/column]

—————

Thanks

[LelyModerator]

Hello There,

I did check and there’s no syntax error on the code above. It is the logic of the html structure and the CSS that is wrong. Of course it will do that because as you indicated on the CSS once the column is hovered it will show the text. All of those text belong on the same column that’s why everything is hovered:

.x-column:hover .text-on-hover {
    bottom: 0;
    opacity: 1;
    transition: all 0.5s ease;
}

Use this html code:

[column type="1/3" class="img-hover-container"]<a class="x-img x-img-link" style="margin-bottom:0px" href="http://avfx.live/about-us/murray-lapides/" title="Murray Lapides!" data-options="thumbnail: 'http://avfx.live/wp-content/uploads/2017/02/Murray-Lapides-BW-REV2-2-e1357571897270-300x300.jpg'"><img src="http://avfx.live/wp-content/uploads/2017/02/Murray-Lapides-BW-REV2-2-e1357571897270-300x300.jpg" alt="Murray Lapides">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Murray Lapides<br>Founder & CEO<br>[x_icon type="search-plus"][/custom_headline]</a>[/column][column type="1/3"] 
<a class="x-img x-img-link" style="margin-bottom:0px" href="#example" title="Hey There!" data-options="thumbnail: 'http://avfx.live/wp-content/uploads/2017/02/Steve-Halling-BW-REV2-1-300x300.jpg'"><img src="http://avfx.live/wp-content/uploads/2017/02/Steve-Halling-BW-REV2-1-300x300.jpg" alt="Text">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Steve Halling<br>President<br>[x_icon type="search-plus"][/custom_headline]</a>[/column][column type="1/3" last="true"]<a class="x-img x-img-link" style="margin-bottom:0px" href="#example" title="Hey There!" data-options="thumbnail: 'http://avfx.live/wp-content/uploads/2017/02/Tom-Peckham-BW-REV2-71-300x300.jpg'"><img src="http://avfx.live/wp-content/uploads/2017/02/Tom-Peckham-BW-REV2-71-300x300.jpg" alt="Text">[custom_headline class="responsive-heading text-on-hover" type="center" level="h5" min_size="15px" max_size="20px"]Tom Peckham<br>General Manager<br>[x_icon type="search-plus"][/custom_headline]</a>[/column]

Then use this custom CSS:

a.x-img:not(.x-img-thumbnail):hover>.text-on-hover {
    bottom: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99999999;
}

.text-on-hover {
    position: absolute;
    bottom: -100px;
    opacity: 0;
    width: 100%;
    padding: 10px;
    background-color: #f8981d;
    background-color: rgba(248,152,29,0.6);
    color: #fff;
    transition: all 0.5s ease;
    margin: 0;
    height: 100%;
    font-size: 1.2em!important;
    font-weight: 300;
}

Hope this helps.

[pkingcoParticipant]

Hi,

Ok so I see the below changes to the html
where you’ve added a class to the first column
[column type=”1/3″ class=”img-hover-container”]
you’ve wrapped the image in the link <a class=”x-img x-img-link”…
added data-options thumbnail

and I understand the concept that the link is calling forward all of the text but I guess what I don’t know, or don’t understand, is do I need to add an id to the image or column (1/3) to have it only call up the correct text?

I’ve implemented the above code in both the html and the css but it’s still calling up all of the hover text.

Any more ideas? Sorry to make this complicated.

Thanks

[LelyModerator]

Hi There,

Remove this custom CSS:

.x-column:hover .text-on-hover {
    bottom: 0;
    opacity: 1;
    transition: all 0.5s ease;
}

That is what makes it active all the time. That says when the column is hovered, all text should display. Sorry I forgot to clarify that we have to remove that part. See this:http://screencast-o-matic.com/watch/cbe6ee6yV0

Hope this helps.

[pkingcoParticipant]

Oh Man, I knew it was something dumb I was doing, or in this case not doing.

Thanks so much, that works perfect!

A follow up to this hover issue:

Is there a way to keep the orange hover restricted to the images border (doesn’t bleed outside the image) in tablet mode? It seems fine in desktop and mobile views. Would I do some sort of “Media Query”?

See screen shot.

Thanks

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
	.img-hover-container.x-1-3 + .x-column.x-1-3 .x-img-link {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

Thanks.

[pkingcoParticipant]

Thanks Friech!

For some reason the first image in the 1-3 column set still isn’t working. The other two are working perfectly.
I inspected the code but I can’t figure out how the first column is different from the other two, so I don’t know how to get the css to apply.

I am puzzled.

Any ideas?

Thanks

[LelyModerator]

Hi There,

It is working when I checked. See this:http://screencast-o-matic.com/watch/cbe2bB6Acp
Although, I noticed this part of the link on the first image on second row:
href="“#”"

href option is using curly quotes. Update to just this: `href=”#”

Hope this helps.

[pkingcoParticipant]

Hi,

Thanks for for spotting that. I forgot to strip out the curley quotes. I’ll go through and clean those up.

My apologies, I should have mentioned in my previous reply that the issue is only on the mobile views.
(Small 481px – 767px and Extra Small 480px & Smaller)

And it is only the first in the series (1-3). So weird. I’m sure I’m doing something stupid.

I’ve attached screen shots.

Thanks

[LelyModerator]

Hi There,

Look for this part:

@media (max-width: 767px) {
	.img-hover-container.x-1-3 + .x-column.x-1-3 .x-img-link {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}

Update to this:

@media (max-width: 767px){
.img-hover-container.x-1-3>.x-img-link {
    max-width: 300px!important;
    margin-left: auto;
    margin-right: auto;
}
}

Hope this helps.

[pkingcoParticipant]

Thanks!!

This is perfect. You guys are the best.

Cheers

Garet

[JoaoModerator]

I am glad we managed to help and thanks for your kind words!

Let us know if you need help with anything else.

Joao

[Author]

Posts