I have searched all over stack overflow but I am unable to find any clue and I am struck here. I used flex container and child items in my code to some extent but I couldn't move beyond that. Thing is when we hover a child item, a new child item need to be created as shown in the expected result. Should we need to use pseudo element or any other flex properties to achieve this. Thanks much in advance.
My code:
https://jsfiddle.net/k2qr398u/1/
My result
https://imgur.com/kRHNHuu
Expected result:
https://imgur.com/2B6CkYF
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
/* position: relative; */
}
.col p {
font-size: 16px;
font-weight: bold;
}
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
<div class="col col-2">
<p class="my-name">Sri</p>
</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</body>
P.S: Sorry if this question sounds very silly or dumb, I am a beginner trying to learn web dev skillsets.
I have created something similar to your expected result. Please run the code snippet for the result.
UPDATE: To include the hover off transition.
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
position: relative;
}
.col p {
font-size: 16px;
font-weight: bold;
}
/*
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
*/
.col-1,
.col-2-1,
.col-2-2,
.col-3 {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
.wrapper {
position: relative;
}
.wrapper:hover .col-1 {
transition: 1s;
left: -200px;
}
.wrapper:hover .col-2-1 {
transition: 1s;
top: -170px;
}
.wrapper:hover .col-2-2 {
transition: 1s;
top: 170px;
}
.wrapper:hover .col-3 {
transition: 1s;
left: 200px;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-2-1">
<p class="my-name">Sri</p>
</div>
<div class="col col-2-2">
<p class="my-name">Pratham</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</div>
</body>
The idea is:
Overlay some content over main content.
On hover reveal it :)
.card {
width: 150px;
height: 80px;
border: 1px solid #999;
background: #ccc;
border-radius: 8px;
position: relative;
margin: 20% auto;
}
.card:hover > .o-top {
top: -80px;
background: #f00;
}
.card:hover > .o-bottom {
bottom: -80px;
}
.o-top {
top: 0;
transition: top 1.5s, background 2s;
}
.o-bottom {
bottom: 0;
transition: bottom 1.5s, background 2s;
}
.card-overlay {
position: absolute;
height: 100%;
width: 100%;
background: #333;
pointer-events: none;
color: #fff;
}
<div class="card">
<div class="card-overlay o-top">TOP OVERLAY</div>
<div class="card-overlay o-bottom">BOTTOM OVERLAY</div>
<H3>INTERNAL CONTENT</H3>
</div>
Related
when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
/*my container*/
.container-home{
width: 100%;
height: 60rem;
display: flex;
align-items: center;
}
/*
the articles are here*/
.words {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100vh;
margin-left: 25vh;
transition: 1.5s;
}
.header{
font-size: 5rem;
font-weight: 500;
}
.description {
display: block;
margin-top: 3rem;
font-size: 2rem;
}
/*explore text span*/
.explore{
margin-top: 2.5rem;
width: 15rem;
height: 4rem;
text-align: center;
display: block;
font-size: 2rem;
border: 0.1rem solid #000;
border-radius: 2.5rem;
margin-left: 1.5rem;
position: relative;
z-index: 1;
}
/*explore text a*/
.explore a{
display: block;
text-decoration: none;
font-size: 2rem;
color: #000;
text-align: center;
margin-top: 0.7rem;
}
.explore:hover {
border-color: transparent;
text-align: center;
transition: 1s;
transform: translateY(0.6rem) translateX(-1rem);
}
/*colored rectangle under text explore*/
.explore-hover{
display: inline;
position: absolute;
width: 15rem;
height: 4rem;
border-radius: 2.5rem;
background-color: #f1e0d4;
top: 42rem;
}
/*circle , solid circle and image in this*/
.image-design{
width: 100%;
height:100vh;
}
.circle{
position: relative;
width: 100%;
height: 100%;
clip-path: circle(300px at center);
background-color: #d7e7f1;
margin-top:8rem;
}
.solid-circle{
position: absolute;
width: 60rem;
height: 60rem;
border-radius: 50%;
background-color: transparent;
top: 30%;
left: 28%;
border: 1px solid #3398d7;
}
/*I created it to put an image on top of the circles*/
.conainer-image-design{
position: absolute;
width: 100%;
left: 25rem;
height:100vh;
}
.image{
position: relative;
top: 25%;
left: 12%;
}
<div class="container-home">
<div class="words">
<span class="header">
Handcrafted<br>
& ethically sourced
</span>
<span class="description">A collection inspired by old-world charm, crafted
<br>with moisannites and diamonds.
</span>
<span class="explore">Explore→</span>
<div class="explore-hover"></div>
</div>
<div class="image-design">
<div class="conainer-image-design">
<div class="circle"></div>
<div class="solid-circle"></div>
</div>
<span class="image"><img src="./ring.png"></span>
</div>
</div>
what do you recommend to give the measurements, I mainly use rem or % .which is better to keep the image intact?
This is my goal:
Some circular buttons that have an hover state: on mouseover, a black container with some text (with different length) should appear growing from left to right.
I didn't know how to do that. My doubts are about how to set the two different width because it should be from 0 to auto but if it's 0, then mouseover can't work.
Here is my sample code:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
Here's a start. I think it's all pretty self-explanatory. The max-width on the text elements is arbitrary--set it to something that will fit all possible names.
I simplified the markup a bit. You could take it further by making the inner circles pseudo-elements if you like.
* {
box-sizing: border-box;
}
.container {
display: inline-block;
background-color: #ddd;
width: 62px;
padding-left: 10px;
}
.item {
display: inline-flex;
align-items: center;
border-radius: 32px;
padding: 8px;
margin: 16px 0;
cursor: pointer;
border: 1px solid black;
background: white;
font-family: Verdana, Arial, sans-serif;
transition: all .5s;
}
.circle {
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #CD4025;
}
.item:nth-child(2) .circle {
background-color: #0097A7;
}
.item:nth-child(3) .circle {
background-color: #FFAC40;
}
.text {
color: #fff;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.item:hover {
background: #000;
transition: all .5s;
}
.item:hover .text {
max-width: 200px;
margin: 0 16px;
transition: all 1s;
}
<div class="container">
<div class="item">
<div class="circle"></div>
<div class="text">Lilly Martin</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Philip McDaniel</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Tom Bombadil</div>
</div>
</div>
You can do this CSS transitions and altering the scale of the div while the circle item is hovered. Take a look what I did here:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px;
scale: 0;
transform-origin: left;
transition: all 200ms ease-in-out;
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
.item:hover .hovered-elem{
scale: 1;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
can anyone help me on how to remove the huge white space between the two images? Both images are in their respective divs with layer effects when hovered. I have tried changing display to inline-block and setting font-size to 0 but nothing works. I also want the two images to be at the center when adjusted. I may have incorrectly apply the mentioned efforts to different classes or divs throughout the process but I am not sure where I did wrong.
Attached are the html and css along with a screenshot of how it looks like on local server. I hope the attachments are useful. Thank you.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
Like this?
If so you just need to use display: flex and align-items: flex-start
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
align-items: flex-start
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
text-align: center;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
Try to make row flex container, then align content to center, with gap you can make space between images:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
gap: 1em;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
you can use bootstrap class for width .campus-col or use custom width
You can use (justify-content: center) to center the children in the flex displayed parent, in short: center the .img in .row.
Then you can add margin for spaces between them (the method used in the code below).
Or you can use (justtify-content: space-between) and set the width of the parent (.row), then each .img will be at the edge or it's direction (left or right)
Check this for more detalis: A Complete Guide to Flexbox
The Code:
.row {
display: flex;
justify-content: center;
}
.img {
width: 200px;
height: 300px;
border: 1px solid;
border-radius: 6px;
}
.img {
margin: 0 20px;
}
<div class="row">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
Solution based on your code:
Edited:
.row {
display: flex;
justify-content: center;
}
.campus-col{
height: 200px; /* delete later, added to see the changes */
border: 1px solid #ddd; /* delete later, added to see the changes */
margin: 0 10px; /* add/remove spaces (left right of each one) */
}
The Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
height: 200px;
border: 1px solid #ddd;
margin: 0 10px;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
}
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
When I mouseover the button, the hover effect is over-lapping the icon and label of the button. I tried to move the layer of the icon/label divs on top of the hover effect by putting the z-index: 999; and it doesn't work.
HTML
<div class="service-wrapper">
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn">
<div class="serv-name">TECHNICAL SUPPORT</div>
</div></a>
</div>
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn">
<div class="serv-name">CUSTOMER SERVICE</div>
</div></a>
</div>
</div>
CSS
.button {
height: 40px;
width: 230px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
position: relative;
}
a {
text-decoration: none;
}
.button::before,
.button::after {
background: rgba(255, 255, 255, 1.0);
content: '';
position: absolute;
}
.button::after {
height: 70px;
left: -22%;
top: 0;
transform: skew(50deg);
transition-duration: 0.3s;
transform-origin: top;
width: 0;
z-index: 0;
}
.button:hover:after {
height: 60px;
width: 325px;
}
.iconBtn{
max-height: 85%;
max-width: 85%;
}
img:hover: {
z-index: 999;
}
See JSFIDDLE
Firstly, you attached the z-index:999 to the img:hover meaning that you have to hover the image for it to apply. Also you added an extra : after img:hover so it was like img:hover:.
Furthermore, adding z-index:999 to the label does actually solve the problem. You see the result here:
.button {
height: 40px;
width: 230px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
position: relative;
}
a {
text-decoration: none;
}
.button::before,
.button::after {
background: rgba(255, 255, 255, 1.0);
content: '';
position: absolute;
}
.button::after {
height: 70px;
left: -22%;
top: 0;
transform: skew(50deg);
transition-duration: 0.3s;
transform-origin: top;
width: 0;
z-index: 0;
}
.button:hover:after {
height: 60px;
width: 325px;
}
.iconBtn{
max-height: 85%;
max-width: 85%;
z-index: 999;
}
.serv-name{
z-index:999;
}
<div class="service-wrapper">
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn">
<div class="serv-name">TECHNICAL SUPPORT</div>
</div></a>
</div>
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn">
<div class="serv-name">CUSTOMER SERVICE</div>
I have two div, each having an image and paragraph inside. when I gave class col-md-5 to the divs the img tag doesn't cover all the divs space. How can I fix that? Codes and JsFiddle are following.
HTML:
<div id="recent-posts" class="center-block">
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success">title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success" >title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
</div>
Css:
#recent-posts{
width: 70%;
height: 350px;
display: flex;
justify-content: space-around;
position: relative;
margin-bottom: 100px;
}
.posts{
width: 40%;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
display: flex;
flex-direction: column;
}
.posts img{
width: 100%;
height: 100%;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
background-color: #01a89e;
position: absolute;
width: 50%;
top: 227px;
left: 24%;
color: #101010;
cursor: auto;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
width: 100%;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: 70%;
}
.posts-div{
width: 100%;
height: 70%;
}
Jsfiddle
This happens because each Bootstrap column has padding-left:15px padding-right:15px so the content stays inside the column but does not cover the padding.
So you have a few solutions for this.
add a div that will contain all the content inside the column and give borders to that div
See below or > fiddle
#recent-posts {
width: 70%;
height: 350px;
display: flex;
justify-content: space-around;
position: relative;
margin-bottom: 100px;
}
.posts {
display: flex;
flex-direction: column;
}
.post-container {
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
}
.posts img {
width: 100%;
height: 100%;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success {
background-color: #01a89e;
position: absolute;
width: 50%;
top: 227px;
left: 24%;
color: #101010;
cursor: auto;
}
.posts p {
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
width: 100%;
height: 0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child {
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: 70%;
}
.posts-div {
width: 100%;
height: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="recent-posts" class="center-block">
<div class="posts col-md-5">
<div class="post-container">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success">title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
</div>
<div class="posts col-md-5">
<div class="post-container">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success">title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
</div>
</div>
remove the paddings from the col-md-5
see snippet below or fiddle
#recent-posts{
width: 70%;
height: 350px;
display: flex;
justify-content: space-around;
position: relative;
margin-bottom: 100px;
}
.posts{
width: 40%;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
display: flex;
flex-direction: column;
}
.posts.col-md-5 {
padding-left:0;
padding-right:0;
}
.posts img{
width: 100%;
height: 100%;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
background-color: #01a89e;
position: absolute;
width: 50%;
top: 227px;
left: 24%;
color: #101010;
cursor: auto;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
width: 100%;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: 70%;
}
.posts-div{
width: 100%;
height: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success">title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success" >title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
</div>
a non-orthodox solution would be to increase the width of the image with 30px ( equal to right left padding of the column ) and then move it to the left by 15px to center it
See snippet below or > jsfiddle
#recent-posts{
width: 70%;
height: 350px;
display: flex;
justify-content: space-around;
position: relative;
margin-bottom: 100px;
}
.posts{
width: 40%;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
display: flex;
flex-direction: column;
}
.posts img{
width: calc(100% + 30px);
height: 100%;
margin-left:-15px;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
background-color: #01a89e;
position: absolute;
width: 50%;
top: 227px;
left: 24%;
color: #101010;
cursor: auto;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
width: 100%;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: 70%;
}
.posts-div{
width: 100%;
height: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success">title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
<div class="posts col-md-5">
<div class="posts-div">
<img src="https://www.w3schools.com/css/img_fjords.jpg">
<div class="overlay">
</div>
</div>
<button class="btn btn-success" >title</button>
<p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
</div>
</div>
if you want to solve this i have found an easy fix using your code,
append the class:
class="img-responsive"
to your images and on the css make some changes as following:
.posts {
width: 40%;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
display: flex;
flex-direction: column;
padding: 0;
}
the change that was made was the : Padding:0;
see the JsFiddle as an example