JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <h1>Огромный заголовок</h1>
    <p>Просто текст какойто</p>
    <div class="block">А вот тут будет картинка:</div>
    <div id="magick">
        <div class="showH1">- это H1</div>
        <div class="showP">- это P</div>
        <img src="http://jsfiddle.net/img/logo.png" />
    </div>
</div>    
<span id="btn">Смотреть магию</span>

CSS

.main {
    width: 300px;
    height: 150px;
    background: #fdfdfdf;
    border: 1px solid #000;
    margin: 20px;
    position: relative;
    padding: 10px;
}

.main:hover #magick {display:block !important}

h1 {
    font: 900 16px/125% Arial;
}

p {
    margin: 30px 0;
}
   

#magick {
    position: absolute;
    left: 0; top:0;
    display: none;
    width: 300px;
    height: 150px;
    background: #fdfdfdf;
    padding: 10px;
}

.showH1 {
    text-align: right;
    margin-right: 60px;
}

.showP {
    text-align: right;
    margin: 30px 60px 30px 0;
}

img {
    background: lightblue;
    margin-top: 25px;
}

#btn {border-bottom: 1px solid #000;cursor: pointer;}
#btn:hover {border: none}

JavaScript

function show(){
var btn = document.getElementById("btn");
var magick = document.getElementById("magick");
    btn.onclick = function(){
       (magick.style.display == "block") ? magick.style.display = "none" : magick.style.display = "block";
    }
}
show();