I have some large .png (.jpg, ...) files that require pretty much a full screen to see. How do I create thumbnails on a standard HTML page? Is there some kind of size scaling control in the tag that I've somehow missed?
Can I get the large image to display when the mouse hovers over such a thumbnail?
(JavaScript and CSS are OK for either answer).
EDIT: Since target browsers may be showing at different size resolutions, how do I keep the thumbnail proportionally scaled to the displayed size of the web page/text?
The technique really amounts to smoke and mirrors, since both images are directly coded on the page. However, the larger image is made invisible through CSS and only becomes visible when the visitor hovers over the link. Clicking the link opens the full-size image in the new page. The image above is coded as:
<div id="links" align="center">
<div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
<a href="../images/nebulan90.jpg" target="_blank">
Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
</div>
</div>
Images that are linked within the division are automatically hidden through CSS:
#links a img {
height: 0;
width: 0;
border-width: 0;
}
Since all images are automatically hidden, it is necessary to display the thumbnail as a background image outside of the actual link. In order for the link to work over the image and display the text below the image (instead of over it), it is necessary to include this code:
#links a {
display:block;
padding-top: 110px;
}
The larger image is revealed above the link when the cursor is hovered over it:
#links a:hover img {
position: relative;
top: -260px;
left: -90px;
height: 240px;
width: 320px;
border-width: 2px;
border-color: #0ff;
}
Related
This is how to original image look like:
And here is how to show it on website:
My question is why to change the black colour between the original image and the image which showed on website, and what can I do to avoid it?
Here is how to call the image on HTML:
<img id="logo" src="Photo/my-logo.png" alt=""/>
Here's how to call the image on CSS:
#logo {
display: block;
margin: 0;
position: absolute;
top: 2%;
float: left;
width: 15%;
left: 0%;
color: #101010;
}
The original image has 805px x 204px, therefore when write width: 100%; it to come many place from Monitor... .
I to try with Gimp the image to scaling, what the image to come is similar as the second image...
With Gimp scaling the image to 265px x 67px, how to show it...
how to show the image later the scaling
When give width: 100%; come same problemm..
I found the solution!, ..the verity, was on other Forum that people to say to me...
1. In Gimp do Filters > Generic > Erode , this will thicken up the black ,
how to show later this step
2. scale with Gimp the image to 265px 67px.
3. how it to show the logo on the Website..
how to show on the website
So I have a simple element with a png image in it, however on my page, only some areas of the image are click-able. I have no idea what the problem is.
#thumbnail {
position: relative;
float: left;
height: 350px;
padding-left: 25px;
padding-right: 100px;
}
<img id="thumbnail" src="Design.png">
As you can see there is nothing unusual about the image, I don't know why it is doing this. Also in the areas that you can't click, the cursor of course does not change to the pointer.
Turns out it was an issue with the z-index of the image being the same as the div it was in.
how to crop an image in html? I have an image on server-pc, is it possible to put only a cropped portion on my webpage without explicitly cropping and creating a new image?
You have two options really.
1) is to use image modification scripts to reproduce a cropped image, like TimThumb (requires PHP). This will crop the image dynamically. It's unclear from your question whether you don't want a new image at all, or whether you just don't want to create one manually.
2) is to do something nifty with HTML/CSS. Basically you'd create a container for your image, hide the overflow, and position/resize the image within it. It'll be something like this...
HTML:
<div class="crop">
<img src="image.jpg" alt="">
</div>
CSS:
.crop {
display: block;
height: 100px;
position: relative;
overflow: hidden;
width: 100px;
}
.crop img {
left: -20px; /* alter this to move left or right */
position: absolute;
top: -20px; /* alter this to move up or down */
}
I am using a wordpress template to control my website. On the home page is a small header with "Home About Us Contact Us" etc etc and then below that is an image that transitions to another image which transitions to another image. This image is too large for my liking so I am trying to shrink it. So I go to the CSS and adjust the image size, however because there is text on the bottom of the image it is being cut off.
I would like to maintain the image width but just make it a little shorter, say about 75% of the original design.
Below is what I think is the applicable code
.camera_wrap {
height: 672px!important;
max-width: 1920px;
display: none;
position: relative;
z-index: 0;
margin: 0 auto 60px!important;
I added the height: 672px!important; code which makes it about the height I want but again the bottom gets cut off. I would prefer to have the CSS re-size the image instead of clip it. But all of my searches haven't turned up how to do this. I am just finding the re-size attribute.
Try using a path to the img rather than the images class to control the styling for the image.
example html
<div class="image-div">
<img class="image">
</div>
instead of
.image { height: 500px; }
try
.image-div img { height: 500px; }
Also, here's an example of a fiddle and an example in that fiddle of how to affect change to only the second image using nth-child
https://jsfiddle.net/Hastig/g6m5nqc9/1/
.image:nth-child(n+2) {
height: 75px;
}
I have a very large wallpaper (1920x1080 - Full HD) on my site, and I want it to center to the middle of the screen, instead of the left side, if the browser window is smaller than the image.
My current markup looks like this:
<div id="wallpaper">
<img />
</div>
And the styles are:
div#wallpaper
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
div#wallpaper img
{
display: block;
margin: 0px auto;
}
I'm using an img tag, because I load it async through jquery, and I'm using position absolute on the parent div to ensure it stays out of the page flow. Finally my content is positioned on top of it with z-index higher than 1.
The problem with the above is, when you browser is only 1024x768 you'll just see the left side of the image - I want it to be the middle portion.
Meaning it should crop from both left and right sides, when the wallpaper is larger than the browser window.
Hope all this made sense, otherwise please ask :-)
I'm not sure what you want to do is possible, the way you're doing it.
What I would do is set the image to be the background-image of the wallpaper div, and then set the background position to center the image.
eg.
<div id="wallpaper" style="background-image: foo.jpg"></div>
and in CSS...
div#wallpaper
{
background-position: top 50%;
}