How can i make my post thumbnail sharper?

HTML & CSS
1

By Default the post thumbnails are blurry. After action on Hover: thumbnails get sharper, bigger size and then get again blurred

Is it possible to have thumbnails like this
Default: Sharp:
Action on Hover: Bigger size and stay sharp

https://www.discovernauts.com/ . Here is the link of my site

2

Yes. :winky:

Have you got an example image for members
to play around with?

coothead

4

OK, so where is the actual image that you
would like members to play around with? :rolleyes:

5

The images in post thumbnails

7

So are you referring to this collection…

1 - discovernauts-nature1.jpg
…to…
9 - discovernauts-nature9.jpg

coothead

8

yes !

9

screenshot-www.discovernauts.com-2020.12.19-21_06_40
screenshot-www.discovernauts.com-2020.12.19-21_06_401120Ă—416 100 KB

Check this out

11

Hi there rabbitrun987,

here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<base href="https://www.discovernauts.com/wp-content/uploads/2020/05/">

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
 }
h1 {
	font-size: 1.5em;
	text-align: center;
 }
h2 {
	font-size: 1.5em;
	font-weight: normal;
 }
.thumbnails {
	display: flex;
	justify-content: center;
	width :76%;
    padding: 0;
    margin: 2.5em auto;
    list-style: none;
 }
.thumbnails li {
	width: 100%;
    max-width: 16em; 
    margin: 0.5em;
 } 
.thumbnails img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #000;
    transition: 0.5s ease-in-out;
 }
.thumbnails img:hover,
.thumbnails img:active {
	transform: scale(2);
 }
</style>

</head>
<body>

 <h1>Page Details</h1>

 <h2>Exclusive Itineraries &#8250;</h2>

 <ul class="thumbnails">
  <li><img src="discovernauts-nature2.jpg" alt=""></li>
  <li><img src="discovernauts-nature5.jpg" alt=""></li>
  <li><img src="discovernauts-nature4.jpg" alt=""></li>
 </ul>

 <h2>Best Travel Tips &#8250;</h2>

 <ul class="thumbnails">
  <li><img src="discovernauts-nature1.jpg" alt=""></li>
  <li><img src="discovernauts-nature6.jpg" alt=""></li>
  <li><img src="discovernauts-nature9.jpg" alt=""></li>
 </ul>

 <h2>More Thumbnails &#8250;</h2>
 
</body>
</html>

You can also view it in action here…

https://codepen.io/coothead/full/NWRgJaV

coothead

1 Like
12

Hi,
They aren’t exactly “thumbs”, they are scaled down from 1920x1079 px to 320x90 px.

The image CSS for >768px:

@media only screen and (min-width: 768px)
#first-blog .blog-list.hover-image-style-1 .blog-featured-image img, .blog-list.list-isotope-metro .blog-bg-image-metro {
    display: block;
    width: 100%;
    height: 90px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

(The 100% width distorts the aspect ratio.)

What was your goal exactly?

Edit)
Supposed to be posted before @coothead above. :slight_smile:

1 Like
13

All I see on your website is a paper plane and the website name, no content.

1 Like
14

I went out and did my weekly food shopping
whilst waiting for the page to load. :rofl:

coothead

1 Like
15

It has the content covered by a “loader” so you’ll have to enable Javascript to view any content.

Clearly the webdesigner doesn’t know there’s a no-script tag for this. :wink:

1 Like
16

JS is already enabled.

I think the OP has more important problems than fuzzy thumbnails. :frowning:

17

OT)
I never enable JS in these cases, I just remove the loader by the Inspector tool.

If I plan to revisit, I’ll add a user-css. :stuck_out_tongue:

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.