How can the picture be taken behind the ''top pick'' text?
The problem: https://iili.io/VQKa0F.jpg
Page which has the problem: https://awet123.blogspot.com/2022/04/testing-all-required-boxes-for-niche.html
Wrong place of .cg-our-top-pick. You should replace it to position after .cg-li-photo
Bad:
<div class="cg-layout-img">
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Good:
<div class="cg-layout-img">
<div class="cg-li-photo">
<a class="cg-aff-link" href="https://www.amazon.com/dp/B01M12RE4A?tag=kitlit-20&linkCode=ogi&th=1&psc=1" rel="nofollow noopener" target="_blank">
<img alt="Goxawee Cordless Drill Screwdriver" class="cg-img-1" src="https://m.media-amazon.com/images/I/413Spl-3a0L.jpg" loading="lazy" />
</a>
</div>
<div class="cg-our-top-pick">TOP PICK</div>
<div class="cg-li-ratebadge">
<div class="cg-rate"><span>9.4/10</span> <span>Our Score</span></div>
</div>
</div>
Result:
Related
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 have created three images in a column and I set column-count: 3; plus border-width for those three images. Now I need to know about the hover state.
HTML:
<div class="wrap">
<h1 class="content-title"><span>Popular</span></h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="olymbic.html">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
</div>
</div>
When I hover an image, it needs to look like this:
.
And here is my jsfiddle: http://jsfiddle.net/6g7v899q/
May I know, how to do this?
Thanks in advance.
something like this then ?
img{margin:40px;border:25px solid white;}
img:hover{border-left:25px inset gray;border-right:25px outset gray;border-top:25px outset white;border-bottom:25px inset white;}
<img src="http://lorempixel.com/200/200" width="200" height="200" />
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.
I have a problem with the theme on Tumblr called Brick. Whenever I post a photoset, on the entry page when I click on the photoset, a lightbox pops up and I can click through the images. However, my captions (the longer the description and the bigger the photo) are cut off by the edge of the browser.
You can see it in the pic I've uploaded here: http://i60.tinypic.com/xddwcx.png.
I've been poking around the code both the html and css, but I'm not sure what would be the best way to go about this. Is there a simple fix to correct the hidden overflow within tumblr coding? Much appreciated help on the matter in advance! The site is http://movementdetroitblog.tumblr.com and below is my code for the photosets.
{block:Photo}
<div class="photo">
{block:indexpage}
<div class="photo-hover">
<div class="captions">
<a href="{permalink}">
<span>x</span> {Timeago}
</a>
<a href="{permalink}">
<span>f</span> {NoteCountWithLabel}
</a>
</div>
<a href="{permalink}">
<div class="overlay"></div>
</a>
<div class="larger-width">
<img src="{PhotoURL-HighRes}"alt="{PhotoAlt}">
</div>
<div class="normal-width">
<img src="{PhotoURL-500}"alt="{PhotoAlt}">
</div>
</div>
{/block:indexpage}
{block:permalinkpage}
{LinkOpenTag}
<img src="{PhotoURL-HighRes}"alt="{PhotoAlt}">
{LinkCloseTag}
{/block:permalinkpage}
</div>
{/block:Photo}
{block:Photoset}
<div class="photo">
{block:indexpage}
<div class="photo-hover">
<div class="captions">
<a href="{permalink}">
<span>x</span> {Timeago}
</a>
<a href="{permalink}">
<span>f</span> {NoteCountWithLabel}
</a>
<a href="{permalink}">
<span>j</span> view photoset
</a>
</div>
<a href="{permalink}">
<div class="overlay"></div>
</a>
<div class="photoset">
{block:Photos}
<img src="{PhotoURL-500}" alt="{PhotoAlt}">
{/block:Photos}
</div>
</div>
{/block:indexpage}
{block:permalinkpage}
<div class="center-element">
<div class="responsive-level-1">
{Photoset-500}
</div>
<div class="responsive-level-2">
{Photoset-500}
</div>
<div class="responsive-level-3">
{Photoset-250}
</div>
</div>
{/block:permalinkpage}
</div>
{/block:Photoset}