Sometimes a paragraph or post should be shown to the visitors. Usually, images are coming with texts as well. By the following code you can show a popup with transition effect containing a paragraph and an image. It also contains a close button, so the user can close it easily.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
<a class="button" href="#popup">Open Modal</a>
<div class="popup" id="popup">
<div class="popup-inner">
<div class="popup__photo">
<img src="http://devanswer.com/codes/files/popup-image.jpg" alt="">
</div>
<div class="popup__text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ex velit, viverra non vulputate vitae, blandit vitae nisl. Nullam fermentum orci et erat viverra bibendum. Aliquam sed varius nibh, vitae mattis purus. Mauris elementum sapien non ullamcorper vulputate. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eget felis sit amet eros viverra pulvinar.</p>
</div>
<a class="popup__close" href="#">X</a>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext");
* {
box-sizing: border-box;
}
html, body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
}
@media screen and (max-width: 768px) {
html, body {
font-size: 12px;
}
}
.container {
background-color: #9191E9;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.button {
text-decoration: none;
font-size: .875rem;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
border-radius: 1.5rem;
background-color: #fff;
color: #9191E9;
padding: 1rem 2rem;
}
.popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
visibility: hidden;
opacity: 0;
overflow: hiden;
transition: .64s ease-in-out;
}
.popup-inner {
position: relative;
bottom: -100vw;
right: -100vh;
display: flex;
align-items: center;
max-width: 800px;
max-height: 600px;
width: 60%;
height: 80%;
background-color: #fff;
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
transition: .64s ease-in-out;
}
.popup__photo {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 40%;
height: 100%;
overflow: hidden;
}
.popup__photo img {
width: auto;
height: 100%;
}
.popup__text {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100%;
padding: 4rem;
}
.popup__text h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 2rem;
text-transform: uppercase;
color: #0A0A0A;
}
.popup__text p {
font-size: .875rem;
color: #686868;
line-height: 1.5;
}
.popup:target {
visibility: visible;
opacity: 1;
}
.popup:target .popup-inner {
bottom: 0;
right: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.popup__close {
position: absolute;
right: -1rem;
top: -1rem;
width: 3rem;
height: 3rem;
font-size: .875rem;
font-weight: 300;
border-radius: 100%;
background-color: #0A0A0A;
z-index: 4;
color: #fff;
line-height: 3rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}
