Okay
  Public Ticket #2592883
Portfolio hover effect
Closed

Comments

  • Fusao_HH started the conversation
    November 6, 2020 at 2:03pm

    Hello There,

    I got a question about the portfolio hover possibilities. I just want to have an Image swap or black and white effect on them. I tried it with a background image but it is lost when I have several different portfolio Items with different Images. 

    Thanks 

    Ernesto


    If is it not provided in the template is there anything I can do like :

    .av-masonry-outerimage-container { filter: grayscale(100%);    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%);     filter: gray;    -webkit-transition: all .6s ease;
transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease; }
.av-masonry-outerimage-container:hover {    filter: grayscale(0%);    -webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);    filter: none; }


  •  933
    Neuron replied
    November 6, 2020 at 5:23pm

    Hi Ernesto,

    Can you please attach us a screenshot or anything of that, we can't understand you at all what are you trying to achieve.

    Feel free to ask for anything you need.

    Kind Regards


  • Fusao_HH replied
    November 6, 2020 at 5:30pm

    Hey There,

    for example on https://neuronthemes.com/bifrost/freelancer-home/

    There is the mouse over effect white with the text on it. 

    What I want is that the images are black and white and the mouse over that the images are colored.

    If it is not possible via script I would let the B/W image fade into the colored but it also does not work because I can just set one featured image. 

    Best greetings

    Ernesto

  •  933
    Neuron replied
    November 9, 2020 at 9:45am

    Hi,

    I am very sorry for the late reply, we were not working on the weekend.

    Please go and edit Post element and at style tab set the hover to hide, then add the following code to Appearance > Customize > Additional CSS.

    .o-neuron-hover-holder .h-calculated-image img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}
.o-neuron-hover-holder .h-calculated-image img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

    - https://prnt.sc/vg03hj

    Feel free to ask for anything you need.

    Kind Regards


  • Fusao_HH replied
    November 10, 2020 at 5:58pm

    Hello There,

    that helped a lot! 


    Thank you very much!


  •  933
    Neuron replied
    November 10, 2020 at 5:59pm

    You are welcome anytime, feel free to ask for anything you need

    If you like our theme, please leave us a rate with 5 stars at ThemeForest, that would help us a lot.

    Kind Regards,
    NeuronThemes