WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. evelynnv
    Member
    Posted 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  3. evelynnv
    Member
    Posted 1 year ago #

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

  4. evelynnv
    Member
    Posted 1 year 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
    Forum moderator
    Posted 1 year 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 1 year ago #

    I have costum css manager :)

  7. Andrew
    Forum moderator
    Posted 1 year 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 1 year 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
    Forum moderator
    Posted 1 year 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
    Forum moderator
    Posted 1 year 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 1 year ago #

    Perfect!

    Thank you so much for helping out a stranger

  12. evelynnv
    Member
    Posted 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  14. evelynnv
    Member
    Posted 1 year ago #

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

  15. Andrew
    Forum moderator
    Posted 1 year 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
    Forum moderator
    Posted 1 year 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 1 year ago #

    Yes! That works!

  18. evelynnv
    Member
    Posted 1 year 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.