CSS Superposition de Couleurs sur l'Image Hover

C'est ce que je suis venu avec:

(UPDATE 3)

CSS

.work-button {
  display: inline-block;
  background: none;
  transition: all 0.4s ease-in-out;
  padding: 0;
}

.work-hover {
    float: right;
    border: 6px solid rgba(255, 255, 255, 1.0);
    box-shadow: 0px 1px 3px black;
    border-radius: 20%;
}

.work-sub:hover, .work-hover:hover > .work-sub {
  background: rgba(229, 115, 37, 0.7);
  border-radius: 20%;
  /* box-shadow: 0px 1px 3px black; */
  opacity: 1.0;
}

.work-sub {
  text-align: center;
  font-family: "Candal", Verdana, sans-serif;
  font-size: 1.5em;
  color: #fff;
  float: left;
  position: absolute;
  opacity: 0.0;
  transition: all 0.4s ease-in-out;
  border: 6px solid #ffffff;
}

HTML

<div>
 <div class="work-button">
   <img class="work-hover" src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="" />
   <div class="work-sub">Web Design</div>
  </div>
</div>

JavaScript

J'ai fini par l'utilisation de Javascript pour créer l'initiale de la hauteur et la largeur de la div. Basé sur la hauteur de l'image de sorte qu'il peut toujours être réactif. Il peut ne pas être la façon la plus élégante, mais il fonctionne.

function resizeWorkOverlays() {
    //Edit These to reflect your proper class names
    var workButtonClass = 'work-button';
    var workButtonImage = 'work-hover';
    var workButtonSub = 'work-sub';
    ////////////////////////////////////////////////
    ///
    ///For Overlapping Border Put the Number of
    ///pixels that the border is the width of
    ///the border on the object. If unsure put '0'
    ///
    /////////////////////////////////////////////////

    var borderWidth = 0; //Width of the border 

    var workButtons = document.getElementsByClassName(workButtonClass); //Gets All Elements with the class defined in 'workButtonClass' varible

    var fullBorderWidth = borderWidth * 2; //Accounts for border-top and border-bottom and left and right

    for (var i = 0; i < workButtons.length; i++) {

        var workButton = workButtons[i]; //Work with a single work button
        var workImage = workButton.getElementsByClassName(workButtonImage)[0]; //Gets First SubHeading In A 'work-hover'
        var workSubheading = workButton.getElementsByClassName(workButtonSub)[0]; //Gets First SubHeading In A 'work-button'

        //Sets the workSubHeading Styles
        workSubheading.style.height = workImage.offsetHeight - fullBorderWidth + "px";
        workSubheading.style.lineHeight = workImage.offsetHeight - fullBorderWidth  + "px";
        workSubheading.style.width = workImage.offsetWidth - fullBorderWidth + "px";
    }
}

window.onresize = function () {
   resizeWorkOverlays(); //This will run everytime the browser resizes
}

resizeWorkOverlays(); //This sets the overlays initially

Vous pouvez également envisager d'utiliser une image carrée et à arrondir les coins avec border-radius au lieu d'utiliser un "pré-formaté" de l'image. Puis le rayon des frontières sur la superposition va correspondre à l'image. Juste une pensée.

Mis à JOUR le Violon:

Violon

OriginalL'auteur Brandon Davis

Ajout d'une superposition de div (ou toute autre balise) à l'intérieur de .work-button, après .work-hover

<div class="work-button">
  <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-overlay">Web Design</div>
  <div class="work-sub">Web Design</div>
</div>

Je suis en supposant que vous souhaitez afficher sur planer

.work-button:hover .work-overlay {
  -webkit-transform: scale(1);
}

Puis ajoutez votre style de .work-overlay

Violon: http://jsfiddle.net/KdnJQ/4/

Remarque: en Raison de votre image, de la formation, j'ai utilisé fixe la largeur et la hauteur de la superposition.

OriginalL'auteur rzr

Si vous pouvez changer votre conteneur extérieur ( .work-button ), être un inline-block avec position:relative au lieu d'un bloc, vous pouvez ajouter une superposition de div avec position: absolute, et lui faire prendre les dimensions de la mère avec width: 100%; height: 100%:

<div class="work-button">
    <img class="work-hover" src="http://oi41.tinypic.com/118m6fn.jpg" alt="" />
    <div class="work-sub">Web Design</div>
    <div class="overlay"></div>
</div>

.work-button:hover .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.work-button:hover .overlay {
     background: rgba(229, 115, 37, 0.7);
     transition: all 0.4s ease-in-out;
     transform: scale(0);
     border-radius: 20%;
}

http://jsfiddle.net/KdnJQ/5/

OriginalL'auteur bfavaretto