This Joomla 4 override allows you to present on your website a list of services with a nice hover effect by using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
if (!$list)
{
return;
}
?>
<div class="services">
<div class="container">
<div class="row text-center">
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<?php foreach ($group as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4 pb-5">
<div class="services-main">
<div class="services-box pt-5">
<p class="services-icon"><i class="<?php echo $item->urls->get('urlatext'); ?>"></i></p>
<div class="cover"></div>
</div>
<div class="services-head">
<?php if ($params->get('link_titles') == 1) : ?>
<h2><a class="mod-articles-category-title <?php echo $item->active; ?>" href='<?php echo $item->link; ?>'>
<?php echo $item->title; ?></a>
</h2>
<?php else : ?>
<h2><?php echo $item->title; ?></h2>
<?php endif; ?>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">Read more <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
<?php else : ?>
<?php foreach ($list as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4 pb-5">
<div class="services-main">
<div class="services-box pt-5">
<p class="services-icon"><i class="<?php echo $item->urls->get('urlatext'); ?>"></i></p>
<div class="cover"></div>
</div>
<div class="services-head">
<?php if ($params->get('link_titles') == 1) : ?>
<h2><a class="mod-articles-category-title <?php echo $item->active; ?>" href='<?php echo $item->link; ?>'>
<?php echo $item->title; ?></a>
</h2>
<?php else : ?>
<h2><?php echo $item->title; ?></h2>
<?php endif; ?>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">Read more <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>CSS
.services{
width: 100%;
padding:50px 0 50px;
}
.services-main{
width: 100%;
border-bottom: 2px solid transparent;
background-color: #f9f9f9;
padding-bottom: 20px;
}
.services-main:hover .cover:before{
box-shadow: none;
}
.services .services-box{
width: 100%;
height: auto;
position: relative;
}
.services .services-head{
text-align: center;
padding: 10px 15px;
border-top: none;
}
.services .services-head h3{
font-size: 16px;
color: #222;
font-weight: 600;
}
.services .services-head p{
color: #444;
letter-spacing: 0.4px;
line-height: 1.7;
margin: 20px 0 20px;
}
.services .services-head a{
color: #000;
font-size: 13px;
padding:10px 20px;
border-radius: 5px;
display: inline-block;
-webkit-transition: 0.5s ease 0s;
-moz-transition: 0.5s ease 0s;
-ms-transition: 0.5s ease 0s;
-o-transition: 0.5s ease 0s;
transition: 0.5s ease 0s;
}
.services .services-head i{
margin-left: 5px;
}
.services-main:hover{
border-bottom: 2px solid #117EC3;
}
.services-main:hover .services-head a{
background-color: #117EC3;
color: #fff;
text-decoration: none;
}
.services-main .services-box .services-icon i{
font-size: 4rem;
color: #ccc;
background-color: transparent;
width: 100px;
height: 100px;
border: 2px solid #ccc;
border-radius: 100px;
padding-top: 15px;
}
.services-main:hover .services-box .services-icon i{
color: #117EC3;
}
@media all and (max-width: 767px){
.services-main{
margin-bottom: 15px;
}
}Inspiration: https://codepen.io/shishir572/pen/GZzPrO
This Joomla 3 override allows you to present on your website a list of services with a nice hover effect by using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="services">
<div class="container">
<div class="row text-center">
<?php if ($grouped) : ?>
<?php foreach ($list as $group_name => $group) : ?>
<?php foreach ($group as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4 pb-5">
<div class="services-main">
<div class="services-box pt-5">
<p class="services-icon"><i class="<?php echo $item->urls->get('urlatext'); ?>"></i></p>
<div class="cover"></div>
</div>
<div class="services-head">
<?php if ($params->get('link_titles') == 1) : ?>
<h3><a class="mod-articles-category-title <?php echo $item->active; ?>" href='<?php echo $item->link; ?>'>
<?php echo $item->title; ?></h3>
</a>
<?php else : ?>
<h3><?php echo $item->title; ?></h3>
<?php endif; ?>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">Read more <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
<?php else : ?>
<?php foreach ($list as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4 pb-5">
<div class="services-main">
<div class="services-box pt-5">
<p class="services-icon"><i class="<?php echo $item->urls->get('urlatext'); ?>"></i></p>
<div class="cover"></div>
</div>
<div class="services-head">
<?php if ($params->get('link_titles') == 1) : ?>
<h3><a class="mod-articles-category-title <?php echo $item->active; ?>" href='<?php echo $item->link; ?>'>
<?php echo $item->title; ?></h3>
</a>
<?php else : ?>
<h3><?php echo $item->title; ?></h3>
<?php endif; ?>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">Read more <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>CSS
.services{
width: 100%;
padding:50px 0 50px;
}
.services-main{
width: 100%;
border-bottom: 2px solid transparent;
background-color: #f9f9f9;
padding-bottom: 20px;
}
.services-main:hover .cover:before{
box-shadow: none;
}
.services .services-box{
width: 100%;
height: auto;
position: relative;
}
.services .services-head{
text-align: center;
padding: 10px 15px;
border-top: none;
}
.services .services-head h3{
font-size: 16px;
color: #222;
font-weight: 600;
}
.services .services-head p{
color: #444;
letter-spacing: 0.4px;
line-height: 1.7;
margin: 20px 0 20px;
}
.services .services-head a{
color: #000;
font-size: 13px;
padding:10px 20px;
border-radius: 5px;
display: inline-block;
-webkit-transition: 0.5s ease 0s;
-moz-transition: 0.5s ease 0s;
-ms-transition: 0.5s ease 0s;
-o-transition: 0.5s ease 0s;
transition: 0.5s ease 0s;
}
.services .services-head i{
margin-left: 5px;
}
.services-main:hover{
border-bottom: 2px solid #117EC3;
}
.services-main:hover .services-head a{
background-color: #117EC3;
color: #fff;
text-decoration: none;
}
.services-main .services-box .services-icon i{
font-size: 4rem;
color: #ccc;
background-color: transparent;
width: 100px;
height: 100px;
border: 2px solid #ccc;
border-radius: 100px;
padding-top: 15px;
}
.services-main:hover .services-box .services-icon i{
color: #117EC3;
}
@media all and (max-width: 767px){
.services-main{
margin-bottom: 15px;
}
}Inspiration: https://codepen.io/shishir572/pen/GZzPrO