What is an image element..?
An external resource that can embedded in the body of a document which is img element that’s represents an image. The caption of this external resource must be specified in the src attribute. The img element shouldn’t be used to insert images without a meaning to the document.
Here’s how it’s done in three easy steps:
Copy the URL of the image you wish to insert.
Next, open your index. Html file and insert it into the img code. Example: <img src=”(your image URL here)”>
Save the HTML file. The next time you open it, you’ll see the webpage with your newly added image.
What kind of image can be used in webpage ?
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
Importance of Image :
Effectively used, images can help drive more visitors to your website, promote social sharing and ultimately help drive business goals such as sales. A picture may well be worth a thousand words, but it's likely a different thousand words for each of us. Text gives our ideas a precision that we can rarely approach with images alone. Text also plays the central role in SEO, being the only data we can say with certainty that search engines understand perfectly.
What type of pictures/images is good for web page ?
Photographs should be saved and uploaded as JPGs. This file type can handle all of the colors in a photograph in a relatively small, efficient file size. ...
Graphics, especially those using large, flat areas of color, should be saved as PNGs.
JPEG: This is an ideal image format for all types of photographs. PNG: This format is perfect for screenshots and other types of imagery where there's not a lot of color data. GIF: If you want to show off animated graphics on your site, this is the best image format for you.
Image Hover :
Image hover effects create an opportunity to add interactivity to elements on a website without slowing it down. Hover effects are elegant, they don't clutter designs, and websites run smoothly no matter how many you add.
How can you make an image hover effect ?
You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
Hover effects can draw attention to different products, and by enlarging the image, or providing a zoom, you can show off the products that your users are interested in, without them needing to leave the page they are browsing, to click though to the product page instead. Hover effect is simply a change (of color, size, shape, image etc.) of some element while you put a mouse arrow over it. Commonly it is achieved with CSS coding. The hover effect is not cranky at all and can be used practically for any CSS element.
Video Content
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Image, Image Hovers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="gallery">
<a href="page.html"><img src="bugatti.jpg" class="img1"></a>
<img src="mclaren.jpg" class="img2">
<img src="sv.jpg" class="img3">
<img src="bentley.jpg" class="img4">
</div>
<img src="bentley.jpg" width="100%">
</body>
</html>
CSS :
.gallery{
width:80%;
height:auto;
margin:auto;
}
.img1{
height:300px;
width:450px;
margin:10px;
border:5px solid orange;
float:left;
}
.img2{
height:300px;
width:450px;
margin:10px;
float:left;
filter:blur(4px);
}
.img2:hover{
filter:blur(0px);
}
.img3{
height:300px;
width:450px;
margin:10px;
float:left;
}
.img3:hover{
filter:grayscale(100%);
}
.img4{
height:300px;
width:450px;
margin:10px;
float:left;
}
.img4:hover{
filter:drop-shadow(5px 5px 10px blue);
border-radius:50px;
}
0 Comments