WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. evelynnv
    Member
    Posted 8 months 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 8 months ago #

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

  3. evelynnv
    Member
    Posted 8 months ago #

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

  4. evelynnv
    Member
    Posted 8 months 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 8 months 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 8 months ago #

    I have costum css manager :)

  7. Andrew
    Forum Moderator
    Posted 8 months 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 8 months 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 8 months 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 8 months 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 8 months ago #

    Perfect!

    Thank you so much for helping out a stranger

  12. evelynnv
    Member
    Posted 8 months 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 8 months ago #

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

  14. evelynnv
    Member
    Posted 8 months 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 8 months 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 8 months 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 8 months ago #

    Yes! That works!

  18. evelynnv
    Member
    Posted 8 months ago #

    Thank you very much

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.