This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want the image to be over the paragraph, but they aren't in this code. is it enough to place elements below each other in html and they will be displayed below each other or not? Is the dosplay flex and aligning affecting the position so that's why the paragraphs aren't below the images?
.wrapper {
display: flex;
width: 100%;
}
.div {
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
}
<div class="wrapper">
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
</div>
</div>
You can force a specific order on flex-items using the order property. Also set flex-direction to column to ensure your elements are stacked vertically.
.wrapper {
width: 100%;
}
.div {
display: flex;
flex-direction: column;
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
order: 1;
}
p {
order: 2;
}
<div class="wrapper">
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
</div>
Related
As you can see I've used the display flex to vertically align my items, but I want the h1 to go on top of the paragraph.
[In the image you can see how the text are aligned in center.][1]
[1]: https://i.stack.imgur.com/YHj02.png
section{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
scroll-snap-align: start;
}
.one{
text-align: center;
}
<section id="about" class="one">
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat quo accusamus dolor, commodi repudiandae animi esse delectus ipsa <br>magni sed at expedita sint, beatae nulla? Adipisci quasi sint earum quo illo facere voluptatibus, praesentium est <br>neque tempore vitae quas aliquid molestias sit et ut, blanditiis <br>necessitatibus labore ducimus asperiores obcaecati!</p>
<img src="./img/undraw_New_message_re_fp03.png" alt="img">
</section>
Apply the styling flex-direction: column; to your section css selector like so:
section{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* color: white; */
scroll-snap-align: start;
}
.one{
text-align: center;
}
<section id="about" class="one">
<h1>Lorem ipsum dolor sit amet consectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat quo accusamus dolor, commodi repudiandae animi esse delectus ipsa <br>magni sed at expedita sint, beatae nulla? Adipisci quasi sint earum quo illo facere voluptatibus, praesentium est <br>neque tempore vitae quas aliquid molestias sit et ut, blanditiis <br>necessitatibus labore ducimus asperiores obcaecati!</p>
<img src="./img/undraw_New_message_re_fp03.png" alt="img">
</section>
Unable to use Horizontal scroll container inside a grid item. Grid item width gets expanded when a scroll container is inserted. Even scroll container unable to scroll horizontally. When I define a fixed width for the scroll container then only it is working but I want a responsive result. Can anyone please help me with this?
Here is the code snippet.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
Unless content is set to absolute, parent div will keep growing to fit its contents size. This will make your black box (code container) grow. To prevent it, set positioning of code_container's child(.code) to absolute.
.code {
display: inline-block;
position: absolute;
}
But now, code's content jumps out from code container. To prevent this, give .code a fixed width. In your case, give 100%.
.code {
display: inline-block;
position: absolute;
width: 100%;
}
But still nothing will change because it takes it's 100% width compared to the width of the body. To prevent this, set .code's parent (.code_container) position: relative;. Now because .code's parent is positioned relative, code will calculate it's 100% width relative to .code_container's width.
Now you should be able to do horizontal scrolling and it is responsive! But the horizontal scroll bar is covering the content. So give .code_container a min-height (about 30px in your case).
Tested in chrome and firefox. Works fine!
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px 20px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: red;
position: relative;
min-height: 30px;
}
.code {
display: inline-block;
position: absolute;
width: 100%;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad, officia iste, debitis molestiae explicabo repellat saepe
nemo cupiditate nisi. Asperiores dolorem inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae necessitatibus
distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam eos, quae unde provident illum doloribus excepturi optio laudantium
quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
</div>
Finally I have resolved the issue. Just need to include these lines inside container:
min-width: 0;
overflow: auto;
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
/* Auto scroll horizontally */
min-width: 0;
overflow: auto;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
I have three divs in one container div. Second of them has got only text and it's height is dynamic depending of text height. First and third has got images and I want to fill out the rest of height that those 3 divs have the same height. How to set height of image to fill out the rest of remaining height??
When I set height 100% to image and parent div has got e.g. 600px , image is getting 600px too and it's overflowing content.
.offer-container {
display: flex;
justify-content: space-between;
> div {
width: 30%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
EDIT
<div className='offer-container'>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum hic a nulla debitis adipisci cupiditate
velit deleniti sint obcaecati? Ex quia illum id facere nulla dolores, cupiditate veniam explicabo
excepturi?
</p>
<div>
<img src='/images/bgc.png' alt='' />
</div>
</div>
<div>text...</div>
<div><img src='/images/bgc.png' alt='' /></div>
</div>
Hey this would solve your problem:
.parent{
display: flex;
}
.child {
width: 350px;
}
.class-1 {
display: flex;
flex-direction: column;
}
#image{
width: 90%;
height:100%;
overflow: hidden;
flex-grow : 1;
position: relative;
}
#image img {
width: 100%;
height: auto;
position:absolute;
}
<div class="parent">
<div class=" child class-1">
<div class="text">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj lkasjfklasdj f</p>
</div>
<div id="image">
<!-- <div class="for-image" style = "background-image:url('https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg')"> -->
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div class=" child 2">
<p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj lkasjfklasdj fasdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj ldj flksadj flksadj flkasdj flkasdjfklasdj flkasdsadsads a das d aasdsadsaddasd as asd asd s ds das das das d ads asd asasdjflkas jflgsdvxzvxzcvzxcvzxv</p>
</div>
</div>
if you want to fiddle around here is the codepen link
Flex-grow fixed this problem
.parent{
display: flex;
justify-content: space-between;
}
.parent > div {
width: 48%;
}
.parent > div:first-child {
display: flex;
flex-direction: column
}
.image{
flex-grow: 1;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="parent">
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<div class="image">
<img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam accusamus necessitatibus unde ex modi
mollitia in est doloremque impedit, eligendi odit beatae quasi pariatur! Tempora doloribus maxime
inventore ipsum. Voluptates.</p>
</div>
</div>
So I tried to play a bit with my code and was looking on many forums to see if the answer was already given. I didn't find anything yet. I wanted to know how to align the buttons divs to each other, like this :
At this time, my code is this :
.directeur {
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a>img {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Can someone help me ? I created other Divs, tried Vertical-Align and Inline-Block. I want the Green Button Rectangle to align like this in my code. At the moment, they are not align because of the height of the text box.
Have you tried this.
.custom_element{
position: absolute;
left:0;
right:0;
text-align: center;
}
Replace custom_element with your required element.
This is a job for Flexbox!
Wrap you whold code in a flexbox container, which will ensure all your .directeurs have the same height
Use flexbox for your .directeur, with flex-direction: column to arrange sub-elements vertically.
Set margin-top: auto on your last element (.directeur a) to ensure it will always be a the very bottom of its parent.
.directeurs {
display: flex;
}
.directeur{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
}
.directeur a {
margin-top: auto;
}
.directeur a > img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeurs">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>
Set a min-height for the Lorem ipsum parts of this to make them the same:
.directeur{
width: 50%;
float: left;
}
.directeur p {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
min-height: 225px;
}
.directeur a>img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
display: block;
}
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
Or you can use some javascript to measure the tallest one then make the other one the same height on page load, something like Equalise.
You can use display:table-cell and position. I have taken the liberty of adding a wrapper around the two .directeurs. See it it works for you.
.directeur-wrapper{
display:table;
}
.directeur{
display:table-cell;
width:50%;
padding:20px 20px 80px;
position:relative;
}
.directeur img{max-width:100%;}
.directeur a{position:absolute; bottom:0;}
<div class="directeur-wrapper">
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
<div class="directeur">
<img src="http://via.placeholder.com/500x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
<img src="http://via.placeholder.com/300x70" alt="">
</div>
</div>
I have a littre problem.
Curently, I have a struture like this (run in full page)
.color{
background : red;
}
.color-green{
background : green;
}
.vertical-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<body>
<div class="container-fluid color-green vertical-align">
<div class="row">
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
</div>
</div>
</body>
I would like to expand div on hover independently like this
But i use bootstrap, and I don't know how to make that with bootstrap..
if you have an idea or track to follow
thanks
on :hover, you can use transform: scale() to make the element bigger, change the background, and add position: relative; z-index: 1; to keep that element on top of it's siblings. And use transition to create a smooth transition, if you want that.
.color{
background : red;
}
.color-green{
background : green;
}
.vertical-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.color-green > .row > .text-center {
transition: transform .25s, background .25s;
}
.color-green > .row > .text-center:hover {
transform: scale(1.2);
background: #8dc63f;
position: relative;
z-index: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<body>
<div class="container-fluid color-green vertical-align">
<div class="row">
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
</div>
</div>
</body>