<a href="#" class="img__link"> <img src="path" /></a>a { display: block; position: relative; }
a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; }
a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(icon-path); opacity: 0; }
a:hover:before,
a:hover:after { opacity: 1; }<a href="#" class="img__link">
<img src="path" />
<span class="img__mask"><i class="img__icon"></i></span>
</a>a { display: block; position: relative; }
.mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; }
a:hover:after {
opacity: 1;
}<div class="block">
<img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
<a href="#">
<span class="block1">Читать</span>
</a>
</div>img,
a {
display: block;
margin: 0 auto;
text-align: center;
}img {
display: block;
margin: 0 auto;
}
.block {
text-align: center;
}.block {
display: flex;
flex-flow: column nowrap;
align-items: center;
}type: imagetype: inline (универсально для кастомного содержимого):$('.btn').magnificPopup({
items: {
src:
'' +
'<div class="mfp-figure">' +
'<button title="Close (Esc)" type="button" class="mfp-close">×</button>' +
'<img class="mfp-img" src="http://lorempixel.com/1920/1080/">' +
'<div class="mfp-bottom-bar"><div id="map"></div></div>' +
'</div>',
type: 'inline'
},
callbacks: {
open: function(){
var map_options = {
center: {lat: 55.753994, lng: 37.622093},
//streetViewControl: false,
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map'), map_options);
google.maps.event.trigger(map, "resize");
}
},
});<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<input name="color_1" value="<?php echo $color_1; ?>" />
<input name="color_2" value="<?php echo $color_2; ?>" />
<input name="color_3" value="<?php echo $color_3; ?>" />$('input').on('click', function(){
var
$this = $(this),
newValue = 'new value';
$this.val(newValue);
});