Thu, 2016-03-03 10:58
Hi all,
I'm into HTML & CSS.
I'm making a website now but got a problem with the linking a picture onto a different website. Whenever I put a <a href=""> and try it on the browser, it's not opening the page but a gallery and saying "image couldn't be found"
Could someone please help me? I can't find where I made a mistake. Thank you in advance.
<section id="content-3col" class="portfolio-block text-center zero-bottom" style="padding-top: 140px; padding-bottom: 60px; border-bottom-width: 0px; border-bottom-color: rgb(232, 232, 232); background-image: none; background-attachment: scroll; background-color: rgb(0, 0, 0); background-size: auto; background-repeat: repeat;"> <div class="container-fluid"> <div class="row"> </div> <ul class="portfolio-list"> <li> <a href="Portfolio-streetart-set1.html"><img src="images/streetart1.jpg" alt=""></a> </li> <li> <img src="images/portrait1.jpg" alt=""> </li> <li> <img src="images/documentary1.jpg" alt=""> </li> </ul> </div> </section></div>
.portfolio-list { display: block; position: relative; margin-left: -15px; margin-right: -15px; } .portfolio-list:after { content: ""; display: block; clear: both; } .portfolio-list li { display: block; position: relative; overflow: hidden; float: left; padding: 0; max-width: 100%; height: auto; } .portfolio-list li a { display: block; position: relative; color: #fff; background: #252830; } .portfolio-list li a span { font-size: 20px; position: absolute; display: block; z-index: 2; top: 50%; margin-top: -10px; left: 5%; right: 5%; text-align: center; opacity: 0; transform: translateY(10px); -webkit-transform: translateY(10px); } .portfolio-list li a:hover span, .portfolio-list li a:hover span { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); } .portfolio-list li img { width: 100%; height: auto; } .portfolio-list li:hover img { opacity: 0.70; } .portfolio-list li img, .portfolio-list li a span { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .portfolio-list li { width: 33.3%; } .container .portfolio-list li { width: 33.33%; padding: 10px; } .container .portfolio-4col li { width: 33.33%; } @media (max-width: 1400px) { .portfolio-list li { width: 33.33%; } } @media (max-width: 900px) { .portfolio-list li, .container .portfolio-list li { width: 50%; } } @media (max-width: 500px) { .portfolio-list li, .container .portfolio-list li { width: 100%; } .container .portfolio-list li { padding-top: 0; } }
