Hover effect question


#1

hello, excellent theme, I have a question, is it possible to configure a hover effect in the images of the homepage of the post when the mouse passes excerpt?, sorry for my bad english, thanks


#2

Hi there,

Please try these snippet codes below:

.home-layout .hentry:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fbb829;
    left: 0;
    top: 0;
    display: none;
    z-index: 1;
    opacity: 0.7;
}

.home-layout .hentry:hover:before {
    display: block;
}

.home-layout .hentry:hover .thumb-icon {
    z-index: 2;
    left: 0;
    opacity: 1;
    top: 20%;
}

Put the code into Customize > additional CSS

Regards,
Awan


#3

thanks for the quick response, I’m doing the tests and I do not see the excerpt when I pass the mouse, I do not know what will be missing, the posts have their excerpt created, here is the site link http://mundodrama.com/ thanks


#4

Hi, I am sorry if there is miss-understanding. Can you tell me for more detail, what do you want when you hover your mouse over the box? The code in above is to make the background displayed full height.


#5

Sure, I would like that when you pass the mouse over the image of the front page post they will show a description, similar to this example (https://www.w3schools.com/howto/howto_css_image_overlay.asp) that is done in html, excuse my bad english


#6

I see… Please try this code instead:

.home .hentry {
    padding-bottom: 0;
}
.home .hentry .thumb-icon {
    display: none;
}
.home .hentry .post-content.no-thumb {
    display: none;
    top: 0;
    position: absolute;
    background: #fbb829;
    opacity: .89;
    left: 0;
    padding: 20px;
    height: 100%;
    color: #000;
}
.home .hentry .post-content.no-thumb, 
.home .hentry .post-content.no-thumb a, 
.home .hentry .post-content.no-thumb .entry-meta {
    color: #000;
}
.home .hentry:hover .post-content.no-thumb {
    display: block;
}

#7

thats great!, just what I needed. One last detail, is it possible to keep the title of the post? or keep the information in both places (duplicate), thanks


#8

It’s not possible because we are using CSS code to moving the title and description into hover effect.

If you want to have duplicate content, you need to customize the existing code of the theme, and it’s beyond our support policy :slight_smile:

Regards,
Awan.


#9

I understand, thank you very much for the help, :grinning:


#10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.