Menu
I currently have a tile on which I hover is initially blurred. After the image is zoomed out, this blur sort of settles down and produces an undesired effect on the tile. Please have a look at the code I have pasted. It should give you a fair idea of what I'm talking about.
I tried messing around with the CSS after and before the image is hovered upon 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>Do you notice the slight unblurring/settling down of the image after it is hovered upon and zoomed? I wish to get rid of that and keep it blurred.
440
To get the blur on Firefox just add filter: blur(5px); along with the -webkit-filter:, and blur will work of FF35+ as well.
As for the unblurring that appears there, is actually a bug which happens on Chrome (and probably every other webkit browser). This doesn't happen on Firefox though.
So to fix it you need to add: transform: translateZ(0);, this will not cause any visual differences and will take care of the problem on Chrome.
.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);
filter: blur(5px); /* firefox 35+ */
-moz-transform: scale(1.1);
-webkit-transform: translateZ(0) scale(1.1); /* Chrome fix - add translateZ */
-ms-transform: scale(1.1);
transform: translateZ(0) scale(1.1); /* Here as well */
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
