Entry-title zooms when hovered in list view

  • Unknown's avatar
    anothernicole · Member ·

    Hi,

    I am working with the Ubud theme, which has both a grid and list view for the homepage. On the grid view, post entry-titles appear when I hover over the featured image (and that’s great!). On the list page, the titles are always visible (also great!).

    I’m not sure what I did, but now when I hover over the titles in list view, they expand/enlarge. Is there any way to have the title be “motionless” on the list view? (Sorry for my lack of technical terms).

    This is the code I’m using:

    .maincontent-wrap article:hover .entry-title {
	font-size: 20px;
}

    There is some “list-view entry title” CSS for the theme, but I couldn’t figure out what to change or how!

    Thank you!!
    Nicole

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi!

    Your code is setting font size of the entry title to 20 pixels, when you pass your mouse pointer over the article (article:hover).

    If the normal size of this title is less than 20 pixels (in fact it is 16px) the effect is this enlarge you talk about.

    You can try to remove this code.

  • Unknown's avatar
    anothernicole · Member ·

    Hi!

    Ok…so there’s no way to have the titles be the same size in the grid and list view? When I remove the code mentioned above, the grid-view title (seen upon hovering) is much smaller…

    Thanks!
    Nicole

  • staff-jeanpierreac · Staff ·

    Yes, Nicole, you can do it.

    You can change titles size to adapt the exact size you want. Just delete ‘:hover’ and test your code above with several sizes till you find the one most suitable for you. Right now font-size is 1rem.

    Sizes can be expressed in several ways
    Px (pixels) units, as you did.
    em units are relative to font-size of the parent element
    rem units are relative to font-size of the root element

    In this case, font-size:1rem means equal size as the root element. (So in case root element size changes, this will change too)

    (More about rem units, here -> http://snook.ca/archives/html_and_css/font-size-with-rem)

    I hope this helps

  • Unknown's avatar
    anothernicole · Member ·

    ok thank you!! I’ll give that a try :)

  • The topic ‘Entry-title zooms when hovered in list view’ is closed to new replies.