Tiles and an advanced hover effect

From the beginning, one of my customers wanted to have tiles on his webpage. I showed him a couple of possibilities, but he fell in love with this profile tiles:

vorlage_kacheln

Having some text on a transparent box at the bottom of a picture that- on mouse over- fills up the whole picture and offers additional information.

Now this was from a webpage done with Sharepoint, so it was not possible to just copy it. I spent quiet some time to go through many many WordPress plugins offering Hover Effects, but only to find one having a title on the picture without mouse over was already a pain.

Finally I ended up with this plugin: Ultimate Hover Effects– Style 2 provided what I needed and could be used as a starting point. I looked at it with my customer and he loved Effect 8:

uhover

So I bought and installed the plugin, and that’s where the pain started again. The plugin was chaotic, slow and unstable. It took a while just to understand which parameters were necessary and how the shortcode was generated. The plugin files had missing links, and there were tons of CSS files loaded. So in order to modify the plugin to fulfil my customers need, I searched the web again, and I found the source CSS which the plugin used: It was Messy Duke from Tympanus. Luckily, they provided the CSS file to everybody, so I was able to reproduce how the effect was generated.

It took me a while, but I managed to generate a box below the image, to place the heading into this box, and to modify the description in a way it filled out the whole image after hovering. The price I paid was that the tiles (and therefore the images) needed to have a precise size. Which was ok with my customer, as long as he got his preferred version of the tiles.

We also did some additional styling like setting opacity to the background.

Just when I wanted to relax, I discovered this:

screen-shot-2016-10-04-at-10-53-41

A slight distortion on Safari….. Not only my tiles, but already on the plugin page, which I never visited with Safari before. At this point it also turned out that support for this (paid) plugin was very lousy- there were several open support questions on WordPress, and nobody ever answered my email. So again I had to do it myself.

I checked the CSS file and what Safari showed me. This gave me the additional problem that I use Firebug, but on Firefox the tiles where fine. So I had to start using the developer tool of Safari, which overwhelmed me a bit. But then it led to the discovery of the „Responsive Design Mode“ in Safari, which is extremely valuable. Again, one pain, one gain!

I also overcame the Safari problem by cheating a little bit: There needed to be a maximal height of the tiles and a minimal image size.

kacheln_safari

Finally done? Oh no…. Of course my „Safari hack“ killed responsive. So I had to add some additional lines with a new max height in responsive mode. In addition I placed the heading into the picture, not below, for better readability. And amazingly, now I was done…..

responsive

 

Here the CSS code I used:

/* Balken unterhalb Bild, kein Balken oberhalb*/

.style2-grid figure img {
margin-bottom: 40px !important;
margin-top: 0px !important;
}
/* Titel unter Bild in margin */

.style2-grid figure figcaption {
padding: 250px 0 0;
text-transform: none;
}

/* Farbe Background*/

figure.effect-duke {
background: rgba(0, 0, 0, 0) linear-gradient(-45deg, #D0CAC6 0%, #847870 100%) repeat scroll 0 0;
}

/*Description positionieren, Background transparent */

figure.effect-duke p {
top: 0;
right: 0;
margin: 20px 20px 45px;
padding: 25px;
background-color: rgba(255,255,255, .7);
}

/* Safari workaround und opacity */
.style2-grid figure {
max-height: 294px !important;
}

.style2-grid figure img {
min-height: 80% !important;
max-width: 100% !important;
opacity: 0.95 !important;
}

/* Responsive */
@media screen and (max-width: 50em) {

/* Bildgrösse*/

.style2-grid figure {
max-height: 120px !important;
}

/* Titel unter Bild in margin */

.style2-grid figure figcaption {
padding: 10px 0 0;

}

}

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.