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>
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.
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;
}
.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;
}
Related
Ive been fiddling with a lot of informationm ive found here to overlay a transparent TV PNG over a youtube video, and have succesfully gotten it to work on desktop. However I cannot get it to align correctly when viewed on mobile devices (which will be primary viewership). Is there a way I can force different CSS values depending on the device used?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
It is live currently at http://nickosteel.com for your reference.
Regards
One problem I could see is that you have the tv image larger than it needs to be, meaning it becomes a bit harder. I would do the following changes.
Container (id="panel")
make this max-width to after your tv image and center it with
margin: 0 auto;
TV image
cut it so it had as much to the left as the right, so the panel width to the right, should be as much "transparent" to the left. That makes it much easier to align
use it as an image (<img />) instead of a background, that way it will become responsive and have it's natural height (and width).
set width width: 100%; (this is for the responsive part)
Video
make it responsive, look at this post for that (note you don't need any of the javascript, just html/css)
center it
with this you are good to go for a responsive solution. It would be a bit easier to give you the changes in css and html, but for that you need to have the tv image at the right size to begin with. Hope this makes sense!
Just an opinion of mine, use classes for styling and id for javascript targets.
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
I'm trying to make a specific clickable location on my image. The image size adjusts dynamically to the size of the browser, so I need the clickable box to do that as well. I have created a box to contain my image (not sure if that is necessary) and thought that if I made a box (a.resume) within that container, it would adjust relative to the image. However, the box seem to be creating outside of the container, off-screen to the right.
Below is the CSS:
#banner {
width: 100%;
margin-bottom: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
img.banner {
max-width: 100%;
height: auto;
width: auto;
}
a.resume {
top: 20%;
left: 35px;
width: 60%;
height: 28%;
position: relative;
background-color: black; /* to see where my box is */
display:block;
}
Below is the HTML:
<body>
<div id="banner">
<img src="banner.png" class="banner" />
<a href="banner1.png" class="resume" />
</div>
</body>
Also, I would appreciate it if you can let me know if I can simplify anything in my CSS or HTML. I'm new to this and I might be over complicating them.
You'll need to use the HTML map tag. You can learn about it here
I have the following html:
<div class="fix-to-top">
<div class="background-image"></div>
</div>
I want to be able to fix the position of the image to the top of the page -- so that it is always at the top of the page no matter how far down the user scrolls. In addition, I want the image to always stay in the center of the page, so if a user re-sizes his browser, the image stays in the center. Here is what I tried, but wasn't getting the result:
.fix-to-top {
position: fixed;
top: 0px;
width: 2000px;
}
.fix-to-top .background-image {
margin: 0 auto;
}
However, the side margins aren't doing 'auto'. How would I correctly do this?
img {
position: fixed;
right: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-right: -50px;
background: orange;
top: 50%;
}
http://jsfiddle.net/jXdxr/1/
Check this fiddle
No need of using two div's
You can use background-attachment and background-postion properties to achieve it
I want to mask out part of an image on a page, making part of the image darker so a highlighted portion stands out. (This is often used to preview the effect of the crop tool in photo editors.)
Currently, my plan involves loading two copies of the images on top of each other and using clip: rect(); to slice out of a portion of the top image. Is there a better way to handle this? I should also mention that my image is actually an animated GIF (oh dear ...)
I thought it best to figure this out before I started trying to update the crop with javascript.
CSS:
.container {
width: 1075px;
margin: 10px;
border: 1px solid black;
padding: 10px;
overflow: auto;
}
.image-container {
position: relative;
clear: both;
background-color:#eee;
}
.background{
opacity:.40;
}
.highlight {
position: absolute;
top: 0px;
left: 0px;
clip: rect(126px 257px 197px 156px);
}
HTML:
<div class="container">
<div class="image-container">
<img class="background" src="animate.gif" width="1075" height="605" />
<img class="highlight" src="animate.gif" width="1075" height="605" />
</div>
</div>
Position the image using position: absolute for each image. The layer above should be smaller then the bottom one. Than use background-position: x y;
Something like this:
#image1, #image2 {
position: absolute;
left: 0;
top: 0;
background: url('https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif')
}
#image1 {
min-width: 276px !important;
min-height 110px !important;
opacity: 0.5;
}
#image2 {
left: 251px;
width: 25px;
height: 110px;
background-position: 100% 100%;
}
Look here an example:
http://jsfiddle.net/8n3Rr/
Try to position a <div> over the images, put a low opacity on it and a width or height half the size of the image.