[bracasParticipant]

Hello guys!

I want specific images to scale up smooth and smooth back when hovering. I don’t want every .img to use this CSS feature just the one I choose within the class field of the image. Could you guys help me with the global CSS code this?

Thank you

[ThaiModerator]

Hi There,

Please add the following CSS:

.img-zoom img,
.img-zoom{
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.img-zoom:hover,
.img-zoom:hover img{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

After that add the img-zoom to your images.

Hope it helps 🙂

[bracasParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Please try adding this code on Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {
  $('.img-zoom').hover(function(e) {
  $(this).parents( ".x-section").css('opacity', '0.6');
  });
  
});

Adjust opacity accordingly.
Please check this thread for the next request:https://community.theme.co/forums/topic/logo-resize-on-scroll-down/

Thank you for the feedback. Option to add SVG icons was already added to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[bracasParticipant]

jQuery(document).ready(function($) {
  $('.img-zoom').hover(function(e) {
  $(this).parents( ".x-section").css('opacity', '0.6');
  });
  
});

it just makes the background opacity in white not black and only on in the block/row/section not the whole browser view. When I’m not hovering anymore the effect contains/ is still active and does not fade away my example. Have a look at my example once again, thanks!

I will have a look at the other suggestion thanks!

Okay, but do you have a request list where I can send feedback directly to your “request bank” or do you snap up things in the forum?

[Rue NelModerator]

Hello There,

Thanks for updating in! Sorry if the JS code did not worked out for you. Please remove the JS code make use of this JS code instead:

jQuery(document).ready(function($) {
  $('.img-zoom').hover(
    function(e) {
      $(this).parents( ".x-section").css('opacity', '0.6');
    }, function(e) {
      $(this).parents( ".x-section").css('opacity', '1');
    }
  );  
});

Please let us know if this works out for you.

[bracasParticipant]

No didn’t work.

* Still white and not dark opacity.
* Still just the section that that is given the opacity, not the whole site as I want.
* This customized JS did put a opacity on the image, it should be everything around it and in dark like my example I send you before.

Thanks

[LelyModerator]

Hi There,

Try this code:

jQuery(document).ready(function($) {
  $('.img-zoom').hover(
    function(e) { 
      $(this).css('z-index','999999999');
    $(this).css('position','relative');

      $('body').addClass( "darken");
    }, function(e) {
       $('body').removeClass( "darken");
    } );  
});

Then add this custom CSS:

body.darken:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
}
body{ position:relative;}

Something like this:http://screencast-o-matic.com/watch/cbe6fe6yf2

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[bracasParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Would you mind providing the exact URL that has this issue?

Thanks!

[bracasParticipant]

This reply has been marked as private.

[bracasParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

This option is available in feature list element, but for feature box you can create three images with numbers and use them as feature boxes graphic.

Hope it helps.

[Author]

Posts