Currently, I have a tile on which I hang, it is blurry at first. After the image is reduced, this type of blur settles and produces an undesirable effect on the tile. Please take a look at the code I inserted. This should give you an idea of what I'm talking about.
I tried messing with CSS after and before the image freezes, but that doesn't change anything.
.tiles { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; postiion: relative; margin: -2.5em 0 0 -2.5em; } .tiles article { -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; position: relative; width: calc(33.33333% - 2.5em); margin: 2.5em 0 0 2.5em; } .tiles article > .image { -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; position: relative; display: block; width: 100%; border-radius: 4px; overflow: hidden; } .tiles article > .image img { display: block; width: 100%; } .tiles article > .image:before { -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -moz-transition: background-color 0.5s ease, opacity 0.5s ease; -webkit-transition: background-color 0.5s ease, opacity 0.5s ease; -ms-transition: background-color 0.5s ease, opacity 0.5s ease; transition: background-color 0.5s ease, opacity 0.5s ease; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1.0; z-index: 1; opacity: 0.8; } .tiles article > .image:after { -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; -moz-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; transition: opacity 0.5s ease; content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.25; z-index: 2; } .tiles article > a { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease; -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease; -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease; transition: background-color 0.5s ease, transform 0.5s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1em; border-radius: 4px; border-bottom: 0; color: #ffffff; text-align: center; text-decoration: none; z-index: 3; } .tiles article > a > :last-child { margin: 0; } .tiles article > a:hover { color: #ffffff !important; } .tiles article > a h2 { margin: 0; } .tiles article > a .content { -moz-transition: max-height 0.5s ease, opacity 0.5s ease; -webkit-transition: max-height 0.5s ease, opacity 0.5s ease; -ms-transition: max-height 0.5s ease, opacity 0.5s ease; transition: max-height 0.5s ease, opacity 0.5s ease; width: 100%; max-height: 0; line-height: 1.5; margin-top: 0.35em; opacity: 0; } .tiles article > a .content > :last-child { margin-bottom: 0; } body:not(.is-touch) .tiles article:hover > .image { -webkit-filter: blur(5px); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } body:not(.is-touch) .tiles article:hover > .image:before { background-color: #333333; opacity: 0.35; } body:not(.is-touch) .tiles article:hover > .image:after { opacity: 0; } body:not(.is-touch) .tiles article:hover .content { max-height: 15em; opacity: 1; } * + .tiles { margin-top: 2em; } body.is-loading .tiles article { -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); opacity: 0.8; } body.is-touch .tiles article .content { max-height: 15em; opacity: 1; } @media screen and (max-width: 1280px) { .tiles { margin: -1.25em 0 0 -1.25em; } .tiles article { width: calc(33.33333% - 1.25em); margin: 1.25em 0 0 1.25em; } } @media screen and (max-width: 980px) { .tiles { margin: -2.5em 0 0 -2.5em; } .tiles article { width: calc(50% - 2.5em); margin: 2.5em 0 0 2.5em; } } @media screen and (max-width: 736px) { .tiles { margin: -1.25em 0 0 -1.25em; } .tiles article { width: calc(50% - 1.25em); margin: 1.25em 0 0 1.25em; } .tiles article:hover > .image { -moz-transform: scale(1.0); -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } } @media screen and (max-width: 480px) { .tiles { margin: 0; } .tiles article { width: 100%; margin: 1.25em 0 0 0; } }
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <section class="tiles"> <article> <span class="image"> <img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" /> </span> <a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank"> <h2>IrackBot</h2> <div class="content"> <p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC </p> <h3> <i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i> </h3> </div> </a> </article> </section> </body>
Did you notice a slight jagged / sagging image after it hung and enlarged? I want to get rid of this and keep it blurry.
source share