<div class="card">
<img src="https://hsto.org/webt/5f/05/be/5f05beec7f6a9551235894.jpeg" alt="">
<form action="#">
<h3>Title form</h3>
<input type="text">
<button>Send</button>
</form>
</div>
.card {
max-width: 700px;
margin: 0 auto;
position: relative;
display: flex;
img {
width: 100%;
height: auto;
}
}
form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: rgba(255,255,255, .9);
max-width: 400px;
max-height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 8px;
border: 1px solid #c2c2c2;
box-shadow: 0 0 25px 0px rgba(207,202,202,0.9);
h3 {
color: #35373A;
margin: 0 0 15px 0;
}
input {
width: 80%;
padding: 0 5px;
margin-bottom: 15px;
}
button {
color: #35373A;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.