This will be used in my community website (forum, articles) where some users post very large image.
I can auto-resize the images using below codes
#post img {
max-height: 1000px;
max-width: 700px;
}
But one more, I want (on every resized image) a link created to that image URL. So when visitor click the link, they can see the image actual size.
Sure, not a problem. You can use position: absolute to move a link up over the image:
HTML
<div class="img">
<img src="your-img.jpg"/>
View Full Sized
</div>
CSS
#post .img {
position: relative;
}
#post img {
max-height: 1000px;
max-width: 700px;
position: relative;
z-index: 1;
}
#post a.full-size {
position: absolute;
z-index: 2;
/* Change this to move the link around */
top: 0px;
left: 0px;
}
The reason you need the extra <div class="img"> is so there's a relatively positioned parent for the absolutely positioned link. This causes the link to use its parent as its coordinate system, rather than the document.
You can do this simply with HTML:
<a href='image.jpg'><img src='image.jpg' alt='image'></a>
When the user clicks on the image, it will take them to the original full-sized image.
Related
I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.
Problem
I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?
I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.
I made the screen a background image and then used a absolute positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://i.stack.imgur.com/6hnLq.png');
width:420px;
height:365px;
}
.inner {
position: relative;
background-color:;
left: 67px;
top: 109px;
width:277px;
height:150px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.
Basically you want to place the iframe in a container that is positioned absolutely. Then place it directly over the image. Here is an example. Please note the iframe link will not work inside of the fiddle due to JS Same origin issues.
http://jsfiddle.net/weyg1opk/
<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
<iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>
</div>
.container {
position: relative;
top: 110px;
left: 68px
}
.image_container {
width: 421px;
height: 365px;
}
.preview_image{
position: absolute;
}
.iframe_example {
width: 270px;
height: 155px;
z-index: 1000;
}
maybe you can:
Crop the image into pieces and replace the screen image with a iframe without border and fixed size
or
Use the monitor as background, and use a div with absolute position to exact match the screen size and position.
I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.
I have an image inside my page. After some javascript trigger event I want a cross appear on the image. Image will still be visible but cross will be on top.
What is the proper alternatives for this?
(I have similar question here that used HTML5 canvas)
I would create a wrapper for the both the image and the cross, and have them absolutely positioned within the wrapper. The wrapper itself would be fluid within the DOM, but the image and cross would be absolutely positioned so that the cross appears on top of the image. This can be done by setting the wrapper's position property to relative and using absolute positioning on its children.
As for the cross, I would use an image. This way you can set height and width to 100%, so that it will stretch with the wrapper. To control the sizing you would set width/height on the wrapper element, not the images themselves.
HTML
<div class="wrapper">
<img class="img" src="actual-image.jpg" />
<img class="cross-img" src="cross-image.jpg" />
</div>
CSS
.wrapper {
position:relative;
width: 150px;
height: 150px;
}
.img, .cross-img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.cross-img {
opacity: 0.5;
}
It's then trivial to show or hide the cross. Here's a jquery snippet:
$('.cross-img').hide();
Here is a jsfiddle demonstrating this: http://jsfiddle.net/J69qR/
I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.