基本的に、クリックしてその上の画像を拡大すると、もっと見るボタンが必要です。拡大されたページの中央に画像が表示されるように、これを行う方法、または私が従うことができるチュートリアルを知っている人は大歓迎です。ところで、私はウェブデザインにかなり慣れていないので、少し助けてくれてありがとう!
また、変更したいオブジェクトはポートフォリオ項目の下にあります
ここにウェブサイトへのリンクがあります：
http://www.mmicgt.com/michael_g/portfolio.html
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Michael Grace} Portfolio website - {Gracey design}</title>
<link href="css/gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<ul id="navigation">
<li><a href="index.html"><img src="images/images/home_button2.gif" onmouseover="this.src='images/images/home_button1.gif'" onmouseout="this.src='images/images/home_button2.gif'"/></a>
</li>
<li><a href="about.html"><img src="images/images/about_button1.gif" onmouseover="this.src='images/images/about_button2.gif'" onmouseout="this.src='images/images/about_button1.gif'"/></a>
</li>
<li>
<div id="logo" style="padding:16px">
<img src="images/images/logo.png" />
</div>
</li>
<li><a href="portfolio.html"><img src="images/images/gallery_button1.gif" onmouseover="this.src='images/images/gallery_button2.gif'" onmouseout="this.src='images/images/gallery_button1.gif'"/></a>
</li>
<li><a href="contact.html"><img src="images/images/contact_button1.gif" onmouseover="this.src='images/images/contact_button2.png'" onmouseout="this.src='images/images/contact_button1.gif'"/></a>
</li>
</ul>
<div id="header">
<h1><img src="images/images/gallery_03.png" /></h1>
<h2>Portfolio.</h2>
</div>
<div id="line">
</div>
<div id="content">
<p>Did I mention I design stuff? I've had plenty of fun creating a bunch of designs for both Univeristy and for myself as personal projects. Here's a collection of some of my favs.
</p>
<div class="portfolio-item">
<a href="#"><img src="images/home/image1.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image2.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image3.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image4.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image5.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image6.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image7.png" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
<div class="portfolio-item">
<a href="#"><img src="images/home/image8.gif" alt="View more info" /></a>
<p class="btn"><a href="#">SEE MORE</a></p>
</div>
</div>
</div>
</div>
</body>
CSS:
body {
background: url(../images/images/bg_page.gif) center center;
font: 16px Helvetica, Arial, Sans-Serif;
color: #636363;
line-height: 24px;
}
#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}
#header {
height: 177px;
background: url(../images/home/header.gif) top center;
padding: 52px 0 0 28px;
position: relative;
border-radius: 10px 10px 0px 0px;
}
#header h1 {
margin: 0px 0 20px 0;
}
#header h2 {
width: 510px;
font: 30px Helvetica, Arial, Sans-Serif;
color: #f2f0eb;
letter-spacing: 2px;
margin: 0 0 20px 0;
text-shadow: 0px 3px 3px #494949;
}
#logo {
width: 272px;
height: 214px;
position: absolute;
left: 49.5%;
top: 11%;
margin-left: -150px;
margin-top: -86px;
z-index: 2;
}
#navigation {
position: relative;
height: 60px;
}
#navigation li {
display: inline;
width: 160px;
height: 60px;
float: left;
padding: 13px 0 0 16px;
}
#navigation li:nth-child(1) {
margin: 0 0 0 -57px;
}
#navigation li:nth-child(2) {
margin: 0 0 0 0;
}
#navigation li:nth-child(3) {
margin: 0 0 0 0;
}
#navigation li:nth-child(4) {
margin: 0 0 0 77px;
}
#content {
height: 592px;
background: url(../images/home/bg_body.png) top center;
padding: 41px 69px 50px 28px;
overflow: hidden;
position: relative;
border-radius: 0px 0px 10px 10px;
}
#content h2 {
font: 30px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content h3 {
font: 26px Helvetica, Arial, Sans-Serif;
letter-spacing: 2px;
margin: 0 0 20px 0;
}
#content p {
margin: 0 0 30px 0;
}
#content a {
color: #671111;
text-decoration: none;
}
#content a:hover {
color: #a12121;
}
#content .portfolio-item {
width: 190px;
padding: 1px;
background: #eee;
text-align: center;
float: left;
margin: 0 7px 14px 7px;
}
#content .portfolio-item p.btn {
margin: 0;
}
#content .portfolio-item p.btn a {
display: block;
width: 183px;
height: 29px;
padding: 7px 0 0 0;
background: url(images/images/background-seemore_03.gif);
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}