Overlay a div directly on top of a sibling div

1 Views

I’m using WordPress and have installed a plugin for WooCommerce that creates a zoom window for the product image. However, I can’t get the zoom window to appear on top of the original product image. The code looks like this: 

<div class="yith_magnifier_zoom_wrap">
<a class="yith_magnifier_zoom woocommerce-main-image" title="orange-slices" itemprop="image" href="orange-slices.jpg">
    <img class="attachment-shop_single wp-post-image" width="300" height="300" alt="orange-slices" src="orange-slices.jpg">
</a>
<div class="yith_magnifier_mousetrap" style="width: 100%; height: 100%; top: 0px; left: 0px; cursor: pointer;"></div>
<div class="yith_magnifier_zoom_magnifier" style="left: 0px; top: 0px; width: 300px; height: 300px; background-repeat: no-repeat; background-image: url('orange-slices.jpg'); display: block; background-position: -7px -7px;"></div>

Read More

You can see the issue here: WooCommerce product page

I’m trying to center align the zoom window div .yith_magnifier_zoom_magnifier on top of the image div .yith_magnifier_mousetrap. I’ve managed to center it by making it relative and using margin:0 auto; but it now appears directly beneath the product image.

Unfortunately there’s all sorts of inline rules applied by the theme and the plugin, so I need to override that, but I also need to keep the solution responsive as the product image height could vary. Any suggestions would be really welcome. Thankyou.

Post Views: 1

Related posts

2 comments

  1. In this way you don’t need any magic number (e.g. a specific pixel size in the CSS):

    .yith_magnifier_zoom_magnifier {
  position: absolute !important;
  margin: 0 auto !important;
  left: 0;
  right: 0;
}

  2. .yith_magnifier_mousetrap {
    top:-366px!important;
}

    I think that is what you are trying to achieve?

    EDIT

    .yith_magnifier_zoom_magnifier {
    position: absolute !important;
    margin: 0 auto !important;
    height: 100%!important;
    top: inherit!important;
    bottom: 100%;
    left: 50%!important;
    margin-left: -150px!important;
}

Comments are closed.