<div id="cuadroFotos">
<img src="https://2.bp.blogspot.com/-YhY7wr-cUuM/XQEOSKPDCvI/AAAAAAAADVQ/ONMI2jV1m78YvE7bqhVtlV98GwW6zSwagCLcBGAs/s1600/css3_50x50.jpg" alt="" id="Imagen1">
<img src="https://4.bp.blogspot.com/-wzJW9EvsYx8/XQEOSAZznoI/AAAAAAAADVI/J9G_sdFeSaUKjQtyzYAtk1H9UBf5OraDwCLcBGAs/s1600/HTML5_50x50.jpg" alt="" id="Imagen2">
<img src="https://2.bp.blogspot.com/-siIwnrSwt9o/XQEOSK_xzII/AAAAAAAADVM/I37iarxCw2Advt02egmO_Vrj8nkAdgNRACLcBGAs/s1600/IconoPhp.png" alt="" id="Imagen3">
<img src="https://2.bp.blogspot.com/-d67TvtVflB0/XQEOS0He1XI/AAAAAAAADVU/IngUiuCUjrc_SCsJEYvp09xvJgZwHl4IwCLcBGAs/s1600/logoSQ_50x50L.png" alt="" id="Imagen4">
</div>
<div id="Caja-texto">
<p>Este es el texto selecionado</p>
</div>
#cuadroFotos{
height:50px;
width:100px;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
}
#Caja-texto>p{
padding-top:20px;
padding-left:100px;
font-size: 20px;
width: 250px;
height:50px;
border-radius:20px;
border:10px groove darkgrey;
}$(document).ready(function(){
$("#Caja-texto").hide();
});
$("#Imagen1")
.hover(function(){
$("#Caja-texto").show();
$("#Caja-texto>p").html("ESTO ES CSS").css({"background":"green"});
},RatonOut)
$("#Imagen2")
.hover(function(){
$("#Caja-texto").show();
$("#Caja-texto>p").html("ESTO ES HTML5").css({"background":"blue"});
}
,RatonOut);
$("#Imagen3")
.hover(function(){
$("#Caja-texto").show();
$("#Caja-texto>p").html("ESTO ES PHP").css({"background":"red"})
}
,RatonOut);
$("#Imagen4")
.hover(function(){
$("#Caja-texto").show();
$("#Caja-texto>p").html("ESTO ES SQL").css({"background":"yellow"});
}
,RatonOut);
function RatonOut(){
$("#Caja-texto").hide();
}
function ColorFondoDarck(){
$("body").css({"background": "grey"});
}
function ColorFondoNormal(){
$("body").css({"background": "none"});
}
External CSS
This Pen doesn't use any external CSS resources.