интерактивное портфолио

с использованием elementor pro

1

visuale code

скопируйте коды

разместите на своём сайте

Фрагмент JS 
				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
    $(document).ready(function(){
    
    $('.my-title').hover(function(){
        
        var index = $(this).index()
        
        $('.my-title').removeClass('active')
        $(this).addClass('active');
        $('.my-img').removeClass('active');
        $('.my-img').eq(index).addClass('active');
    })
    
    })
</script>
Фрагмент CSS 
				
					selector{
    --bg-color: #F648BF;
    --front-color: white;
}
selector .my-title.active .elementor-widget-container{
    background: var(--bg-color) !important;
    transition: 0.3s ease-in-out;
}
selector .my-img{
    display: none;
}
selector .my-img.active{
    display: block;
}
selector .my-title.active .elementor-icon-box-title, selector .my-title.active .elementor-icon{
    color: var(--front-color);
    transition: 0.3s ease-in-out;
}

визуально

просмотрите как работает код

картинка 1

картинка 2

картинка 3

картинка 4

2

visuale code

скопируйте коды

разместите на своём сайте

Фрагмент JS 
				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
    $(document).ready(function(){
        
    $('.show-more').on('click', function(){
        event.preventDefault()
        $(this).toggleClass('content-hide')
        $(this).closest('.profile-card').find('.show-less, .details-area').toggleClass('content-hide')
    })
    
    $('.show-less').on('click', function(){
        event.preventDefault()
        $(this).toggleClass('content-hide')
        $(this).closest('.profile-card').find('.show-more, .details-area').toggleClass('content-hide')
    })
    
    })
</script>
<style>
.content-hide{
    display: none;
}
</style>

визуально

просмотрите как работает код

Сергей Романов

менеджер

message
video call
call
more

Помогаем вам создать успешный веб-сайт

Профессионально разработанные веб-сайты принесут вам больше потенциальных клиентов, продаж и поклонников!

открыть
закрыть

3

visuale code

скопируйте коды

разместите на своём сайте

CSS-эффект стекла 
				
					/*Glass Effect CSS*/
selector {
    --height: 150px;
    --bottom: -150px;
    overflow: hidden !important;
}
selector .member-info{
    height: var(--height);
    position: absolute;
    backdrop-filter: blur(15px);
    bottom: 0;
    transition: .5s ease-in-out;
}
Наведите , чтобы скрыть/показать CSS 
				
					/*Hover Hide/Show CSS*/
selector .member-info{
    bottom: var(--bottom);
}
selector:hover .member-info{
    bottom: 0px;
}

визуально

просмотрите как работает код

Сергей Романов

Веб Дизайнер

Facebook Twitter Youtube