I have a background image (picnic scene), and I copied out one of the donuts on it to place it over the original donut, and make only that area clickable. It has to stay in place, so that any user regardless of monitor size or window resizing will see the donut in that place and not in different places for different resolutions.
I used percentages for the donut to try to make it responsive and move and resize together with the background. When you resize the window, the picnic and donut resize fine, but the donut also moves around, it won't stay in place.
I want only the separate donut to be clickable, not the original one behind it, so that the user will understand that they have to click specific things.
I thought of maybe using some kind of overlay solution, but there's no way to make a "hole in the image", only to make a transparent area.
I have a few other scenes which have the exact same problem, but the backgrounds are a gif in one and a video in the other, so even if the overlay could solve it, I would have to do a lot of editing frame for frame in the gif and then get video editing software for the video.
Here's the minimal example and recreation of the problem:
body{
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
}
#donut {
width:10%;
margin-left:50%;
margin-top:40.5%;
color:#fff;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
#donut:hover {
width:30%;
}
<!doctype html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="movie">
<div class="scene" id="picnic">
<img class="clickable" id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
</div>
</div>
</body>
</html>
I saw this suggestion but I don't understand how it fits into my situation or how/where the solution is to be added in my case: How to prevent image moving when resizing window
I should also add that another reason why I copied out the donut to put it back in is because I want to animate it on hover (as you can see when you test it), so the user sees it's interactable.
Seems that I managed to fix it. It started behaving when I changed background-size: cover; to background-size: 100% 100%;.
body{
margin: 0;
}
#picnic{
width: 100%;
height: 100%;
position: absolute;
overflow:hidden;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: 100% 100%;
background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
}
#donut{
width:9.3%;
height: 8.2%;
left:50.5%;
top:72.2%;
position:absolute;
}
#donut:hover{
width:21.3%;
height: 16.8%;
top:65.2%;
left:42.5%;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div id="picnic">
<img id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
</div>
</body>
</html>
Now I can resize the window, and the donut will stay in place, and yet expand in the same proportion I want it to expand.
Try using the HTML<area> tag. This allows you to map coordinates to the donut. As in you don't even need to create a new element just specify where it is. It should work on videos too.
Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
Related
The effect I am after is a highlight that triggers on page landing on a select piece of text. Let's target element id="highlight me". The highlight can glow twice around the targeted container and then disappears. It is best articulated visually: video demonstration here. A JavaScript solution is acceptable.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
// Some javascript to make the animation.
</script>
</head>
<body>
<div id="highlight-me">A bit of text needing attention on page landing.</div>
</body>
</html>
Maximum cross-browser support is important.
Try this easiest way.
#highlight-me {
animation: glow 700ms 2;
border-radius: 3px;
display: inline-block;
padding: 2px 5px;
}
#keyframes glow {
50% {
background: rgba(255,0,0,0.5);
box-shadow: 0 0 10px red;
}
}
<div id="highlight-me">A bit of text needing attention on page landing.</div>
I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.
https://github.com/alvarotrigo/fullPage.js
Below is the example i am using.
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html
If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
Look i don't know too much about fullpage.js
But i don know about resizing image according to your window size.....
first of all download any image and i named it sa.jpg
<html>
<head>
<style type="text/css">
#box{
width:100%;
}
<!--This class is added to img element to make it responsive -->
img.responsive{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="box">
<img src ="sa.jpg" class="responsive"></img>
</div>
</body>
</html>
In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width
to adjust to the browser width changes. Next, add a dynamic height property to the class.
Above code is responsive for img element..
Now if you want to use background image css property and resize your image according to screen size
<html>
<head>
<style style type="text/css">
#box{
width:100%;
height:100%;
background-image:url("sa.jpg");
background-size:100% auto;
background-repeat: no-repeat;
}
<!--img.responsive{max-width:100%;height:auto}-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
This one works best for me
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
Well I am working on <iframe src> tag in which i am trying to add hover effect. What really this code does is that when i put my mouse over the yellow box it changes to cyan and red colour with 50 % height each divided vertically. But then I think what about adding an image so I just putted one image url and I noticed that it is not coming fit on that particular area. I tried changing the size or making position absolute ... but nothing worked in this.
My image file is this : 'http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg
Which is not fitting on that particular area.So is there any solution by which on hover I can get full size of that image on that particular area.
WHAT I HAVE TRIED
I have tried using background-size: 100% 100%; but then also its showing image like this.
THIS IS WHAT I WANT I have just edited to show you what I want
My code is divided into three parts
framehover.html
<html>
<body>
<p style="height: 50px;">Move the mouse pointer into the yellow box, then directly into
the green box,
then out of both boxes. No red or cyan should remain, only yellow and green.</p>
<iframe src="my.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
<iframe src="my2.html" frameborder="0" height="300" scrolling="no" width="200"></iframe>
</body>
</html>
my2.html - both my.html and my2.html is same so I am putting this one only. just difference is that in my.html background-color: red; for .outer
<html>
<head>
<style>
body { margin: 0px; }
.outer {
margin: -100px;
width: 400px;
height: 500px;
background-color: green;
}
.outer:hover {
background-color: red;
}
.inner {
visibility: hidden;
width: 100%;
height: 50%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/11/Amanita_muscaria_After_Rain.jpg');
}
</style>
</head>
<body>
<div class="outer"
onmouseover="firstChild.style.visibility='visible'"
onmouseout="firstChild.style.visibility='hidden'"><div class="inner"></div></div>
</body>
the iframe is independent of your website, you can not change the style of iframe, for that you must change it in the original Web. If you are in the same domain with js you can try, but you can have crossdomain error.
I'm trying to show an image, where when you zoom in on a particular spot, it should display that particular area completely on the screen. I created a fiddle. I want to view the image to be of the same resolution as shown in fiddle, but when I zoom in, the magnified zone of the picture should fill the entire original picture frame.
Below is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
/* styles unrelated to zoom */
body {
background-color: black;
margin:0 auto;
}
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
background-color: black;
z-index:1000;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:50px;
height:50px;
position:relative;
top:50;
right:70;
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex3 img:hover { cursor:-moz-zoom-in; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='js/jquery.zoom.js'></script>
<script>
$(document).ready(function(){
$('#ex3').zoom({ on:'toggle' });
});
</script>
</head>
<body>
<center>
<span class='zoom' id='ex3'>
<img src='images/cg_layout.jpg' width='918' height='655' alt=''>
</span>
</center>
</body>
</html>
EDIT
The above code works fine in zooming in a particular place now, when I click on view image in Firefox, I can see zoom work there also, and it works perfectly as I want it. What can I do to make zoom work like as in view image.
EDIT1
Now when I click on view image in Firefox, I can zoom this image. When I click the zoom the image the class changes from shrinktofit to overflowing. When I do the next click the image zoomouts from overflowing to shrinktofit. Now how can Get this feature embedded with my image
Here's another variation of the zoom, it's not click but directly hover (A build off of what Hardik did).
http://jsfiddle.net/4CHj2/1/
You can also different examples used here:
http://www.jacklmoore.com/zoom/
Note that there is an external resource hosted on Drive that Hardik attached to his fiddle.
With that code, you are free to test any example on the site as is.
Good Luck!
I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.