Roll overs/ mouse overs

  • Resolved tbucks11

    (@tbucks11)


    11 years, 2 months ago

    Hi everyone,

    So my web designer has been trying to include “roll overs” to some of the links of my website: thais-breton.com , meaning that whenever the mouse goes on top of a link, the link’s text or image does a little animation. I basically want the words of the menu to get underlined whenever the mouse goes on top, and in the videos section, I’d like the images to have a little zoom-in and the apparition of text whenever the mouse goes on top. (We are using the pho theme)
    Any idea of how we’d be able to do that without having to change the php of the theme itself?
    Thank you so much in advance for your help!
    Thaïs

Viewing 2 replies - 1 through 2 (of 2 total)
  • ruandre

    (@ruandre)

    11 years, 2 months ago

    Add these styles to the bottom of your style.css file.

    /* Add menu underline on mouse-over: */

.main-navigation ul > li > a {
    border-bottom: 1px solid transparent;
    position: relative;
    top: 1px
    }
.main-navigation ul > li > a:hover {
    border-bottom: 1px solid #e14546
    }

/* Zoom and darken images on hover for portfolio page: */

.entry-content a {
    display: inline-block;
    position: relative;
    overflow: hidden
    }
.entry-content a img {
    display: block;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
    }
.entry-content a:hover img {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s
    }
.entry-content a:after {
    content: " ";
    background: rgba(0, 0, 0, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2
    }
.entry-content a:hover:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s
    }

    To make substantial changes to the theme (like having the text appear on top of the images) you have to edit some PHP, sorry.

    Edit: It’s best to use a child theme and paste the above code into its style.css file instead, this way you won’t lose any changes if the theme is updated. See this link for more info http://codex.wordpress.org/Child_Themes

    Thread Starter tbucks11

    (@tbucks11)

    11 years, 2 months ago

    Thank you Ruandre, he seemed to have settled it! Hope this will help other people in the future.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Roll overs/ mouse overs’ is closed to new replies.