WordPress.org

Forums

Spun
[resolved] Add hover to circles inside page (18 posts)

  1. evelynnv
    Member
    Posted 2 years ago #

    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!

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  3. evelynnv
    Member
    Posted 2 years ago #

    Thanks for your response,
    I mean the 'work' page

  4. evelynnv
    Member
    Posted 2 years ago #

    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.

  5. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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.

  6. evelynnv
    Member
    Posted 2 years ago #

    I have costum css manager :)

  7. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  8. evelynnv
    Member
    Posted 2 years ago #

    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);
    }

  9. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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);
    }
  10. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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);
    }
  11. evelynnv
    Member
    Posted 2 years ago #

    Perfect!

    Thank you so much for helping out a stranger

  12. evelynnv
    Member
    Posted 2 years ago #

    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?

  13. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  14. evelynnv
    Member
    Posted 2 years ago #

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

  15. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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.

  16. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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;
    }
  17. evelynnv
    Member
    Posted 2 years ago #

    Yes! That works!

  18. evelynnv
    Member
    Posted 2 years ago #

    Thank you very much

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.