Column hover effect

[vojtechzikmund]

Hello there,

I hope you can help me achieve a hover effect with my column. I have already managed to apply a hover effect for changing background, but I would also like to achieve that the section with the text would go about 50px down (see attached screenshot). Is that possible? Also how do I achieve changing the title (here Petr Novak) to different colour?

Thank you in advance

[ruenel]

Hello There,

Thanks for writing in!

To achieve what you have in mind, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.team .x-column {
    transition: transform 1s ease;
}

.team .x-column:hover {
    background-color: #f6f6f6;
    transform: scale(1.1);
    z-index: 9999;
}

.team .x-column:hover .name {
    color: red;
}

And make sure to edit the text element that holds the name and insert a custom name class in the “Customize” tab.

Hope this helps.

[vojtechzikmund]

Thank you for the response RueNel.

I dunno if I like the animated outcome. Would it be possible to achieve what I sent originally (attached screen)? With no overlapping columns, just making the image slightly (50px) bigger in the bottom on hover and making the content below the image move down (50px)? I think it should be achievable with custom css.

Thank you in advance!

[ruenel]

Hello There,

If you want to enlarge the image, please remove the code given in my previous reply and replace it using this code instead:

.team .x-column {
    overflow: hidden;
}
.team .x-column .x-image {
    transition: transform 1s ease;
}

.team .x-column:hover .x-image{
    background-color: #f6f6f6;
    transform: scale(1.3);
    z-index: 9999;
}

We would loved to know if this has work for you. Thank you.

[vojtechzikmund]

What I’m trying to achieve can be seen in the URL below. Is that possible? Sorry for misunderstanding if that was the case.

[basanta]

Hi There,

Thanks for the clarification!

This is not possible with the current structure you have for the grid.
You have to change the structure to make it happen.

Please follow the below steps.

1. Please give a custom class name to the columns, suppose its name is .gridblock.
2. Put all the text in a single text element instead of separate elements.
   The text element HTML structure should be similar to this

  <span> Manažer Studia Wella</span>
  <h4>Monika Bertlová </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

3. Give a class name to the text block. .gridtext
4. Add the following CSS to your page CSS or theme Option -> CSS

  .gridtext {
   padding: 40px 50px; /* you can set this using text setting in page builder */
   margin-top: -50px; /* you can set this using text setting in page builder */
   z-index: 9; /*this is to overlap the image element above.*/
   transition: 1s ease;
}
 .gridtext span {
  font-size: 14px;
  font-family: "your font name"
  margin-bottom: 20px;
}
 .gridtext h4 {
  font-size: 30px;
  font-family: "your font name"
  margin-bottom: 20px;
}
.gridtext p {
  font-size: 14px;
  font-family: "your font name"
}
.gridblock:hover {
  cursor: pointer;
}
.gridblock:hover .gridtext {
margin-top: 0px !important;
}

If you have basic understanding about CSS, then please do miner changes to match exactly ass per the design.

I would like to point put one thing that, this is something related to an custom CSS, which we usually avoid because this is something out of our theme support scope. If you still have issue please contact a developer to help you on this, as this is the feature not available in the theme.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.