Support » Theme: Spun » Add hover to circles inside page

  • Resolved evelynnv

    (@evelynnv)


    Hi,

    I would like to add a gray layer to my circles inside a page. When hovering over the circle the real color of the image should show. I managed to get this effect on the home page, but can’t seem to find out how to get this effect in this page.
    This is my site
    http://www.evelynnvandamme.be
    I am talking about the ‘work’ page.

    Thank you!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    What code did you use for the Home page to achieve this?

    Thanks for your response,
    I mean the ‘work’ page

    I guess it was somewhere in the part of /homepage/.

    I will have a look with difference checker to my changes.

    But my main issue is to find out what changes the gray layer, and where in the css does it effect the circles in a page.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Please make sure you create a Child Theme or use a Custom CSS plugin, as raised from your last thread. I am not comfortable giving bad advice to edit the theme’s files.

    I have costum css manager 🙂

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you put the code used to achieve the effect (on the Homepage) into the Custom CSS Manager’s allocated section of the dashboard?

    I found this in my costum css manager, I must have made the changes on my homepage through the css manager anyway:

    .blog .hentry a .attachment-post-thumbnail {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -webkit-filter: grayscale(0);
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Add this to your Custom CSS Manager:

    .single .hentry a .attachment-thumbnail {
    	border-radius: 180px;
    	filter: grayscale(100%);
    	-webkit-filter: grayscale(100%);
    	-webkit-filter: grayscale(1); /* Older versions of webkit */
    	-moz-filter: grayscale(100%);
    	-o-filter: grayscale(100%);
    	-ms-filter: grayscale(100%); /* IE 10 */
    	filter: gray; /* IE 9 */
    	filter: url('inc/desaturate.svg#greyscale'); /* Firefox */
    	opacity: .8;
    	-webkit-opacity: .8;
    	-moz-opacity: .8;
    	transition: all .3s ease-in-out;
    	-webkit-transition: all .3s ease-in-out;
    	-moz-transition: all .3s ease-in-out;
    	-o-transition: all .3s ease-in-out;
    	-ms-transition: all .3s ease-in-out;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    }
    .single .hentry a:hover img {
    	border-radius: 180px;
    	filter: none;
    	-webkit-filter: none;
    	-moz-filter: none;
    	-o-filter: none;
    	-ms-filter: none;
    	opacity: 1;
    	-webkit-opacity: 1;
    	-moz-opacity: 1;
    	transition: all .3s ease-in-out;
    	-webkit-transition: all .3s ease-in-out;
    	-moz-transition: all .3s ease-in-out;
    	-o-transition: all .3s ease-in-out;
    	-ms-transition: all .3s ease-in-out;
    	width: 100%;
    	height: 100%;
    }

    Add it above this:

    .blog .hentry a .attachment-post-thumbnail {
     filter: grayscale(0);
     -webkit-filter: grayscale(0);
     -webkit-filter: grayscale(0);
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Then replace this:

    .blog .hentry a .attachment-post-thumbnail {
     filter: grayscale(0);
     -webkit-filter: grayscale(0);
     -webkit-filter: grayscale(0);
    }

    With this:

    .blog .hentry a .attachment-post-thumbnail,
    .single .hentry a .attachment-thumbnail {
     filter: grayscale(0);
     -webkit-filter: grayscale(0);
     -webkit-filter: grayscale(0);
    }

    Perfect!

    Thank you so much for helping out a stranger

    I cheered to soon,

    When I now click on a circle and enter the page with the image, the image becomes bigger and the corners become round when I hover over.

    Or should I start a new topic?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    If that’s caused by the code I’ve recommended then no don’t create a new thread.

    It’s the only adjustment I made, so I believe it is a side- effect of the code you recommended 😉

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I don’t have access to the code at the moment but what you need to do is use a unique CSS selector that targets the page or template your want.

    Look at the classes generated in the body element to explore whether any could be salvaged for this situation.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try replacing all the code in your Custom CSS Manager with this:

    .single-format-gallery .hentry a .attachment-thumbnail {
    	border-radius: 180px;
    	filter: grayscale(100%);
    	-webkit-filter: grayscale(100%);
    	-webkit-filter: grayscale(1); /* Older versions of webkit */
    	-moz-filter: grayscale(100%);
    	-o-filter: grayscale(100%);
    	-ms-filter: grayscale(100%); /* IE 10 */
    	filter: gray; /* IE 9 */
    	filter: url('inc/desaturate.svg#greyscale'); /* Firefox */
    	opacity: .8;
    	-webkit-opacity: .8;
    	-moz-opacity: .8;
    	transition: all .3s ease-in-out;
    	-webkit-transition: all .3s ease-in-out;
    	-moz-transition: all .3s ease-in-out;
    	-o-transition: all .3s ease-in-out;
    	-ms-transition: all .3s ease-in-out;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    }
    .single-format-gallery .hentry a:hover img {
    	border-radius: 180px;
    	filter: none;
    	-webkit-filter: none;
    	-moz-filter: none;
    	-o-filter: none;
    	-ms-filter: none;
    	opacity: 1;
    	-webkit-opacity: 1;
    	-moz-opacity: 1;
    	transition: all .3s ease-in-out;
    	-webkit-transition: all .3s ease-in-out;
    	-moz-transition: all .3s ease-in-out;
    	-o-transition: all .3s ease-in-out;
    	-ms-transition: all .3s ease-in-out;
    	width: 100%;
    	height: 100%;
    }
    .blog .hentry a .attachment-post-thumbnail,
    .single-format-gallery .hentry a .attachment-thumbnail {
     filter: grayscale(0);
     -webkit-filter: grayscale(0);
     -webkit-filter: grayscale(0);
    }
    
    .entry-date {
       display: none;
    }

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Add hover to circles inside page’ is closed to new replies.