Css.html realize photo Wall __html

Source: Internet
Author: User

Note: Preferably in Firefox or Chrome run, the IE effect does not appear-. -

Effect Chart:

Initial

When the mouse moves to a picture, also click on the open picture, will automatically connect to the big picture.

The code is as follows:

-----------newfile.html--------

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<link href= "Newfile.css" rel= "stylesheet" type= "Text/css"/>
<body>
<div class= "Photo-album" >
<a href= "./images/1.jpg class=" Large Polaroid Img1 ">this Breathtaking volcanic lake are at Wai-o-tapu thermal wonderland</a>
<a href= "./images/2.jpg class=" Polaroid Img2 ">this Lovely Waterfall was on Rotorua in Rainbow springs</a>
<a href= "./images/3.jpg class=" small Polaroid Img3 ">ferntastic </a>
<a href= "./images/10.jpg class=" medium Polaroid Img4 ">at Kaikoura We went whale watching!</a>
<a href= "./images/5.jpg" class= Polaroid Img5 ">found Cutie on a walk in New zealand!</a>
<a href= "./images/6.jpg class=" Polaroid Img6 ">an amazing Bubbling volcanic spring, a bit muddy</a>
<a href= "./images/7.jpg class=" Polaroid Img7 ">simon in a giant Kiwi, pretending to be a Kiwi (the bird) </a>
<a href= "./images/8.jpg" class= "small Polaroid Img8" >albatross in Dunedin</a>
<a href= "./images/9.jpg" class= "medium Polaroid Img9" >white water Rafting in Queenstown</a>
<a href= "./images/4.jpg class=" Polaroid Img10 ">white Island< /a>
<a href= "./images/11.jpg class=" small Polaroid img11 "> Sulphurous</a>
<a href= "./images/12.jpg" class= "small Polaroid Img12" >sea Lions !</a>
    <a href= "./images/13.jpg"  class= "small 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.