I'm a graphic design student, I am trying to do my portfolio, however not sure how to add a hyperlink to an icon that appears when you hover your mouse over a portfolio item. The item in code reads as div class="hoverIconChain"
<div class="portfolio-item html android">
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
<div class="hoverWrapperBg"></div>
<div class="hoverWrapper">
<div class="hoverIconChain"></div>
<div class="hoverIconHeart"></div>
<div class="hoverBottom">
<div class="hoverBottomText">Real Gamers Network</div>
<div class="hoverBottomLike"> 63 </div>
</div>
</div>
</a>
</div>
Delete the ending a tag from the bottom of your code, and move it after image.
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
</a>
To add a hyperlink to a div, just do it like this.
<a href="http://google.com">
<div class="hoverIconChain"></div>
</a>
Related
Screenshot: Small line appearing between footer images
No matter what I do to the HTML and CSS, this little underline or underscore (see image) is appearing between the images in my footer. It's blue, so it looks like it may be part of the link somehow (even though I changed the color and decoration of links in the CSS). If I remove either image, it disappears. If the images stack on top of each other (e.g., if I make them block level), it disappears. I want both images sitting next to each other, though.
I've tried the following:
Using vanilla CSS and Bootstrap
Restructuring the footer HTML Putting a text-decoration:none rule on the links
Putting a text-decoration:none rule on the links
Putting a box-shadow:none rule on the links (as suggested in this StackOverflow post)
Here's the footer HTML:
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://via.placeholder.com/25" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
</a>
</div>
</div>
just add text-decoration:none to your <a> tags. Much more helpful when you supply a working snippet
a{
text-decoration:none;
}
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://via.placeholder.com/25" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://via.placeholder.com/25" alt="visit LinkedIn profile">
</a>
</div>
</div>
It doesn't happen here when I add display:inline-block. As a general rule, don't trust inline styles. Use your own float and margin when you need to.
#footer-contact a {
display: inline-block;
}
<div id="footer" class="row py-3">
<div id="site-copyright" class="col-7">
<small>© ABCDEFG, 2022</small>
</div>
<div id="footer-contact" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://picsum.photos/id/237/200/80" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
</a>
</div>
<div id="footer-contact2" class="col-5">
<a href="mailto:exampleABCDEFG#outlook.com">
<img src="https://picsum.photos/id/237/200/80" alt="email me">
</a>
<a href="https://www.linkedin.com/in/ExampleABCDEFG">
<img src="https://picsum.photos/id/137/200/80" alt="visit LinkedIn profile">
</a>
</div>
</div>
I could've helped better if I had more of your code. But, from what you've told, I think it has something to do with footer-contact div. Try removing its border, background, box-shadow etc.
I am trying to change the <a href> link of "signup.php" to go from just being on the word NOW, to the whole <div>, so when a user hovers over anything inside of that div, the link will work:
HTML:
<div class="row">
<div class="grid-full containerHomepage">
<div class="centered">SIGN UP TO HEAD SMART<a class="noDecoration brain" href="signup.php"> NOW</a>
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</div>
</div>
<a class="noDecoration brain" href="signup.php">
<div class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</a>
You can use onclick with javascript:-
<div onclick="location.href='signup.php';" class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
Just style the anchor - (and move the nice icon to the left) ;)
.containerHomepage a { display:block}
.noDecoration { text-decoration: none }
<div class="row">
<div class="grid-full containerHomepage">
<a href="signup.php" class="centered noDecoration brain">
<img src="data:image/png;base64,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" width="50" height="60"/>
SIGN UP TO HEAD SMART NOW
</a>
</div>
</div>
I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
Instead of setting up one after another, by reducing the screen images stretch unnatural (and stay in 4 columns).
I paste a piece of code with only 2 pictures, because otherwise stackoverflow blocking publication of the post.
Thanks in advance
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image2.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
</div>
</div>
As per your comment, if you use
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" class="img-responsive" />
it will ignore the second image tag. Instead use:
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item img-responsive" />
Also, you've made the column col-xs-3 which means that it will be 4 columns from 0px. To make the image 100% width up until the first (small) breakpoint, use col-sm-3instead.
So:
...
<div class="col-sm-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
...
Use class="img-responsive" on img tags. See doc for more info
I am making a webpage with an image below a button, with a link next to it. When I added the image, the button and link shifted next to the image, I want them to stay above it. This is my code:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
<img src="img/image.png" alt="" />
</div>
Try this:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<div>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
</div>
<div>
<img src="img/image.png" alt="" />
</div>
</div>
Now it should work as you wanted
You can do it also using css-
a {
display:block;
}