Olá Marcos, não sei se era bem isso que queria, mas pegando a ideia do site que você mandou como referência, ficaria +- assim comjavascript(código dentro da tag script) :
HTML + JS:
<html>
<head>
<link rel="stylesheet" href="teste.css"/>
</head>
<body>
<section id="portfolio">
<h2>PORTFÓLIO</h2>
<div class="container">
<div id="demo" class="estilo-galeria">REMAZA</div>
<img id="img" src="http://marcosborgesdev.github.io/imagens/consorcio_remaza.jpg" alt="Consórcio Remaza">
</div>
<script>
document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};
document.getElementById("img").onmouseover = function() {mouseOver()};
document.getElementById("img").onmouseout = function() {mouseOut()};
function mouseOver() {
document.getElementById("demo").style.display = "inline";
}
function mouseOut() {
document.getElementById("demo").style.display = "none";
}
</script>
</section>
</body>
</html>
CSS:
#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio .container {
position: relative;
width: 100%;
height: 100%;
}
#portfolio img {
width: 35%;
display: block;
}
#portfolio .estilo-galeria {
width: 35%;
height: 330px;
position: absolute;
top:0;
background-color: rgba(240,230,140, .6); //Cor com transparencia
color: #2F4F4F;
text-align: center;
line-height: 320px; //alinhamento vertical
font-weight: bold;
font-size: 2em;
font-family: sans-serif;
display: none;
}
Eu tentei com hover e focus pelo CSS mas não consegui. Acredito que tenha algum jeito de fazer apenas com CSS usando hover e também transform eanimate para dar os efeitos como o do site de referência.
