html/css: Images slightly shifting on hover? - html

Question

I have set up a page with Wordpress in which thumbnails are displayed for all posts along with the respective post's title as a link to the post itself. The thumbnail images are links to the post as well.
The current version of the site can be seen here: http://udkdev.skopec.de/category/projekte/
Can someone explain to me, why all of the thumbnail images slightly shift when being hovered over? I thought I might have messed up something with the margins, the padding or the border, but after going through the site's CSS multiple times, I can't make out the mistake. Here's the code of the site itself along with the theme's CSS:
<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-projekte">
<div class="projekte">
<div class="button-group filters-button-group">
<button class="active btn" id="all">alle</button>
<button class="projekt-btn btn" id="category-wise-201516">WiSe 15/16</button>
<button class="projekt-btn btn" id="category-sose-15">SoSe 15</button>
<button class="projekt-btn btn" id="category-wise-201415">WiSe 14/15</button>
<button class="projekt-btn btn" id="category-sose-14">SoSe 14</button>
<button class="projekt-btn btn" id="category-wise-201314">WiSe 13/14</button>
<button class="projekt-btn btn" id="category-sose-2013">SoSe 13</button>
<button class="projekt-btn btn" id="category-wise-201213">WiSe 12/13</button>
<button class="projekt-btn btn" id="category-sose-2012">SoSe 12</button>
</div>
<?php if (is_home()) {
query_posts("cat=-3");
} ?>
<?php if (have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div <?php post_class(); ?>>
<p><?php the_title(); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} ?>
</a>
<!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Couldn’t find any articles!</h2>
<?php endif; ?>
</div>
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(300);
} else {
var $el = $('.' + this.id).fadeIn(300);
$('.projekte > .post').not($el).fadeOut(300);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
<?php get_footer(); ?>
The CSS of the site's WP-Theme:
/* -------------------------------- Default WP classes */
* {
/*cursor: url('kvscursor-01-4.png'), auto; */
/*cursor: -webkit-image-set(url("kvscursor-01-4.png") 1x, url("kvscursor-01-4x2.png") 2x) 0 0, auto;*/
}
html {
font-size: 62.5%; }
body {
font-size: 1.7em;
line-height: 1.5;
letter-spacing: 0.6px;
/* background: #6f6;*/
color: #fff;
background: #111;
/* -webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto; */
}
a {
color: white;
}
.wrapper {
max-width: 100%;
margin: 1em 1em 0 1em;
position: relative; }
.wrapper h1 {
font-family: 'News Gothic W01 Bold';
}
.wrapper a:link, a:visited {
/*color: #fff;*/
text-decoration: none;
}
.post-navigation {
/*display: flex;*/
margin-top: 10em;
max-width: 750px;
}
.post-navigation a, .top a, .back a {
color: rgba(255, 255, 255, 1);
border-bottom: 0px solid #ffffff;
padding-bottom: 0px;
}
.post-navigation a:hover, .top a:hover, .back a:hover {
color: rgb(255, 255, 255);
border-bottom: 1px solid #ffffff;
}
.menu a {
color: white
}
.menu a:hover {
border-bottom: 1px solid white;
/*padding-bottom: 0px;*/
}
.projekte a:link, a:visited {
text-decoration: none; }
.projekte a: {
/*border-bottom: 0px solid white;*/
}
.btn {
margin-top: 7px;
padding-bottom: 1px;
color: white;
}
.btn:hover {
border-bottom: 1px solid white;
padding-bottom: 1px;
cursor: pointer;
}
.projekt-btn {
margin-top: 7px;
padding-bottom: 1px;
color: white;
}
.projekt-btn:hover {
color: white;
border-bottom: 1px solid white;
padding-bottom: 1px;
cursor: pointer;
}
.footer-left {
float: left;
margin-left: 0%;
}
.footer-center {
float: right;
margin-left: 0;
}
.footer-right {
float: right;
margin-right: 0;
}
/* NAVIGATION */
nav.menu .current-menu-parent a:link, nav.menu .current-menu-parent a:visited, nav.menu .current-menu-item a:link, nav.menu .current-menu-item a:visited {
position: relative; }
nav.menu .current-menu-parent a:link:after, nav.menu .current-menu-parent a:visited:after, nav.menu .current-menu-item a:link:after, nav.menu .current-menu-item a:visited:after {
position: absolute;
height: 1px;
background: #fff;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -2px;
}
nav.menu li.menu-item {
margin-right: 0.5em; }
/* nav.menu li.menu-item:hover {
position: relative; }
nav.menu li.menu-item:hover:after {
position: absolute;
height: 0.5px;
background: #fff;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -2px; } */
nav.menu .menu-main_menu-container .menu li.menu-item {
display: inline; }
nav.menu .menu-main_menu-container .menu li.home {
display: block; }
nav.menu .menu-main_menu-container .menu li.home a:link {
font-family: 'News Gothic W01 Bold'; }
nav.menu .menu-main_menu-container .menu .sub-menu {
display: none; }
nav.menu .sub-item li {
display: inline; }
/* PAGE + BLOG*/
/*.content a {
color: #fff;}*/
.content {
margin-top: 1.5em; }
.content h2 {
font-family: 'News Gothic W01 Bold';
margin-bottom: 1.5em; }
.content h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.content p {
margin-bottom: 1.5em;
max-width: 700px; }
.content ul.page-list {
list-style: disc;
margin-left: 1em; }
.content .post {
width: 100%; }
.content .post img.wp-post-image {
margin-bottom: 1.5em; }
.content .post p img.alignnone {
max-width: 55vw;
height: auto;
margin-bottom: 0.5em; }
.content .post .wp-caption {
font-family: 'LetterGothicW01-Regular';
margin: 1.5em 0; }
.content .page {
position: relative; }
.content .page .alignnone {
position: relative;
width: 100% !important; }
.content .page .alignnone img {
width: 100%;
max-width: 1000px;
height: auto; }
/* STUDIERENDE */
.wrapper-studierende {
margin: 0 0em; }
.wrapper-studierende .button-group {
margin: 0 0 1.5em 0; }
.wrapper-studierende .button-group button {
background: none;
margin-right: 1.5em;
border-bottom: 1px solid black;
}
.wrapper-studierende .button-group button:hover {
position: relative;
border-bottom: 1px solid white;
}
.wrapper-studierende .button-group button:hover:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-studierende .button-group button:focus {
outline: 0;
text-decoration: none;
}
.wrapper-studierende .button-group button.active {
position: relative;
border-bottom: 1px solid white;
text-decoration: none;
}
.wrapper-studierende .button-group button.active:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px;
text-decoration: none;
}
.wrapper-studierende .post {
width: 23.25%;
float: left;
margin-right: 2.3%;
margin-bottom: 2.3%; }
.wrapper-studierende .post h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.wrapper-studierende .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
position: relative; }
.wrapper-studierende .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-studierende .post:nth-child(4n+1) {
margin-right: 0; }
.wrapper-studierende .post img {
width: 100%;
height: auto;
transition: all 400ms;
}
.wrapper-studierende .post img:hover {
/*opacity: 0.8;*/
}
.wrapper-studierende .post .meta {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-studierende .post .meta a:link {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-studierende .navigation {
display: none; }
.content-studierende {
margin-top: 1em;
}
.content-studierende a:hover {
border-bottom: 1px solid white;
}
.content-studierende h2 {
margin-bottom: 1.5em;
}
/* .content-studierende h2 a:link {
font-family: 'News Gothic W01 Bold';
}*/
.content-studierende .columns {
margin-bottom: 1.5em;
}
.content-studierende .columns p a:link:after {
content: '\0020\2192';
}
.content-studierende img {
margin-bottom: 1.5em;
}
/* PROJEKTE */
.wrapper-offset-fix {
/*margin: 0 1em;*/
transform: translate(1em, 0);
}
.wrapper-projekte {
margin: 0 0em; }
.wrapper-projekte .button-group {
margin: 0 0 1.5em 0; }
.wrapper-projekte .button-group button {
background: none;
margin-right: 1.5em;
border-bottom: 1px solid black;
}
.wrapper-projekte .button-group button:hover {
position: relative;
border-bottom: 1px solid white;
}
.wrapper-projekte .button-group button:hover:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-projekte .button-group button:focus {
outline: 0;
text-decoration: none;
}
.wrapper-projekte .button-group button.active {
position: relative;
border-bottom: 1px solid white;
text-decoration: none;
}
.wrapper-projekte .button-group button.active:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px;
text-decoration: none;
}
.wrapper-projekte .post {
width: 23.25%;
float: left;
margin-right: 2.3%;
margin-bottom: 2.3%; }
.wrapper-projekte .post h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.wrapper-projekte .post:hover h2 a:link, .wrapper-projekte .post:hover h2 a:visited {
position: relative; }
.wrapper-projekte .post:hover h2 a:link:after, .wrapper-projekte .post:hover h2 a:visited:after {
position: absolute;
height: 1px;
background: black;
width: 100%;
right: 0;
display: block;
content: "";
margin-top: -5px; }
.wrapper-projekte .post:nth-child(4n+1) {
margin-right: 0; }
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
}
.wrapper-projekte .post img:hover {
opacity: 0.8;
}
.wrapper-projekte .post .meta {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-projekte .post .meta a:link {
font-family: 'LetterGothicW01-Regular'; }
.wrapper-projekte .navigation {
display: none; }
.post-link {
margin-bottom: 1%;
}
.post-link p:hover {
text-decoration: underline;
}
/* ----------------------------------------------------- smartphonish screens */
#media only screen and (max-width: 767px) {
.wrapper {
margin: 0.5em 0.5em 0 0.5em; }
.wrapper p, .wrapper .post {
width: 100%; }
.wrapper p img, .wrapper .post img {
width: 100%;
height: auto; }
.content p img.alignnone {
max-width: 100% !important; }
.wrapper-projekte {
margin: 0 0.5em 0.5em 0.5em; }
.wrapper-projekte .post {
float: none;
width: 100%;
margin-bottom: 1.5em; }
.wp-caption {
width: 100% !important; }
.wp-caption p.wp-caption-text {
font-family: 'LetterGothicW01-Regular'; }
.wp-caption img {
width: 100%;
height: auto; }
.page img {
max-width: 100% !important; } }
/* ----------------------------------------------------- desktopish screens */
#media only screen and (min-width: 1024px) {
.content-studierende h2 {
margin-bottom: 1.5em; }
.content-studierende h2 a:link {
font-family: 'News Gothic W01 Bold'; }
.content-studierende .columns {
margin-bottom: 1.5em;
max-width: 700px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.content-studierende .columns p {
margin-bottom: 1.5em; }
.content-studierende img {
margin-bottom: 1.5em; }
.content p img.aligncenter {
max-width: 55vw !important;
height: auto; } }
/* -------------------------------- Browser specific CSS */
/* apply only on JavaScript enabled browsers */
/* apply only on Internet Explorer 8 */
/* apply only on Internet Explorer 9 */
/*# sourceMappingURL=style.css.map */
I'm aware that this is a very project-specific question but I simply can't make out what is causing this. Huge thanks to anyone who can help me out.

Answer 1

This fixed it for me in Chrome.
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Answer 2

This is happening because browser is doing antialiasing. Setting backface-visibility: hidden; to .wrapper-projekte .post img will solve this.
.wrapper-projekte .post img {
width: 100%;
height: auto;
transition: all 400ms;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}