Tip # 6: Divi Touch Portfolio

Divi Touch Portfolio

I got an odd requirement from my client. They need a portfolio page of their associates, but don’t want to click to view individual person’s detail. It was quite a out of the line way to create a portfolio page with no click !!!

RESOURCE

You need Divi or Extra and a little bit CSS

PROCEDURE

Create a page with standard four columns section and put a text module in each of them. Make text orientation as center. Put the following type of content in text mode only:

<img src=”http://yoursite.com/wp-content/uploads/2015/03/Dohn-Doe-300×300.png” alt=”Dohn Doe” width=”300″ height=”300″ />
<h3>John Doe</h3>
Chief Executive Officer
<span class=”dropt”>Touch for more
<span class=”dropt_br”>
<b>John Doe</b>: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</span>
</span>

Put CSS class “image-round” in text module. This content will finally transform itself like the following image.

Now we need to put some CSS in Divi Theme Options -> Custom CSS area.

/* Begin Rounded Image For Our Team page */
.image-round img {
    max-width: 200px;
    border-radius: 50%;
}
/* End Rounded Image For Our Team page */

/* Begin Button Color on Our Team Page */
a.small-button {
    color: white !important;
    background: #c1544e !important;
    border-color: #c1544e;
    border-radius: 5px;
    margin-top: 12px;
}
a.small-button:hover {
    color: #c1544e !important;
    background: white !important;
    border-radius: 5px;
    margin-top: 12px;
}
/* End Button Color on Our Team Page */

/* Begin Text Popup on Mouse Hover */
span.dropt span {
    position: absolute;
    left: -9999px;
    margin-top: -210px;
    padding: 20px;
    border-radius: 5px;
    border: 2px solid grey;
    z-index: 6;
    text-align: justify;
}
span.dropt:hover span {
    left: 2%;
    background: #ffffff;
}
.dropt_br br {
    display: none;
}
/* End Text Popup on Mouse Hover */

Final output will be like following. Click on the image below to view it in action.

External Reference

CSS mouseover for links, text, and images.