Not the best with jquery, can someone suggest a general approach for what i am trying to achieve please? I have a grid of photos, and when they are clicked on, an opaque overlay will be animated on top of the entire picture, the overlay will contain some dynamically set text. I have the images, and the onclick handler working, just trying to figure out the best way to apply the overlay. thanks
Not very pretty semantically, but should get the job done :
Let's say your imgs are 200x200.
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
// etc...
Then, the CSS :
.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}
.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}
.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top: 0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}
.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}
This is a pure CSS solution, without animation, works for users with Javascript of.
If you want then to animate it using Jquery :
$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.
then, on click/mouseover
$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});
Check this website may be that help you.
http://flowplayer.org/tools/overlay/index.html
Related
I'm creating an input, where users can upload file images to change avatars as Facebook does. But I know Facebook creates a cycle area and users can fix the image to fit with that circle (image below). I have no idea how to do it. Tell me if you know
Possibly the easiest way to achieve such an effect is to overlay a rounded rectangle with a transparent black outline over the image. However, you will also need to wrap the element in another container with overflow set to hidden to limit the backdrop to the image.
Here is a quick demo:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
}
.circle {
position: absolute;
border-radius: 100%;
outline: rgba(0, 0, 0, 0.5) 100vmax solid;
height: 200px;
width: 200px;
top: 50px;
left: 150px;
}
<div class="wrapper">
<div class="circle"></div>
<img class="image" src="https://picsum.photos/500/300">
</div>
I have this HTML structure:
<div class="container">
<img class="image" />
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
and this CSS code:
.container {
position: relative;
height: 88vh;
margin: 0;
}
.image {
height: 100%;
position: absolute;
margin-right: auto;
margin-left: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.overlay {
position: absolute;
}
My requirements are as follows:
Make image fill the available vertical space and center it horizontally. (Works)
Make image overlay of the same size as the image - without using an absolute width attribute. (Does not work - problem)
Fix icons to specific spots on the image. (Using percentages for top and left attributes ... Not sure if this is going to be as easy as I currently think.)
How can I have it all - a horizontally centered image expanded to fill the vertical space, an exact overlay and elements fixed to specific spot of the image?
While I would prefer a CSS hack, a Javascript solution will be considered, too, in case the width of the image needs to be transferred to the overlay programmatically.
One way of doing it would be to wrap the Image and the Overlay in a div and center that.
.container {
position: relative;
height: 88vh;
margin: 0;
text-align: center;
}
.imagecontainer
{
position: relative;
display: inline-block;
height: 100%;
}
.image {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
<div class="container">
<div class='imagecontainer'>
<img class="image" src='imageurlhere'/>
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
</div>
Like this, the Image will set the width of its parent and in doing so also the width of the Overlay.
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
I am a beginner in Javascript, I am trying to make a website that can show image. the HTML is like this (main part):
//And my Javascript :
document.getElementById('category').innerHTML = row.category[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.top=row.y1[count]
document.getElementById('bbox').style.width=row.x2[count]-row.x1[count]
document.getElementById('bbox').style.height=row.y2[count]-row.y1[count]
/*I set the style in my css file, which is different file with my HTML :*/
#previewimage{
width: 500px;
/* height: 100%*/
z-index: 1;
position: absolute;
}
#bbox{
width: 100px;
z-index: 3;
position: relative;
height: 100px;
border: 5px dashed black;
left: 150px;
top:200px;
}
<div id="images">
<img src="img/80673284_74c3361ed19c018192c338d338d27d67.jpg" id="previewimage">
<img id="bbox">
</div>
Now the problem is why, if I put my javascript line on a button, it change randomly, It is like set the left, top to 0 and width and height remains constant.
Any idea ?
got it!
I just forgot to put px
LOL this is funny
So I have two images, one is a half of a ribbon and the second one is a full ribbon with facebook etc links on it. I need to have the first one in the middle of a page, so when you click it it would expand out. I figured i need to use hidden overlay or something but I am totally new at javascript.
Can someone provide an example or help me with this?
I tried to understand what you want and tell me if this is what you meant.
You can wrap the two images in two sepatare divs and then wrap them in a div with position relative.
Then you give to the two divs position absolute.
On the click of the first div you change the second div left position (or the top if you want a vertical effect).
Here is the html with divs only:
<div style="position: relative">
<div id="frontDiv">
aaaaaaaaaaaa
</div>
<div id="backDiv">
bbbbbbbbbbb
</div>
</div>
Here the CSS:
#frontDiv{
height: 20px; width: 45px;
background: red; position: absolute;
z-index: 1; left: 0px; top: 0px;
}
#backDiv{
height: 20px; width: 30px;
background: blue; position: absolute;
z-index: 0; left: 0px; top: 0px;
}
And here the javascript (in jQuery):
$("#frontDiv").click(function(){
$("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});
At the end you can position the wrapper div wherever you want.
Full example at this fiddle: http://jsfiddle.net/w7RVe/