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

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

1

visuale code

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

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

				
					<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>
				
			
				
					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

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

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

				
					<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

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

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

				
					/*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;
}
				
			
				
					/*Hover Hide/Show CSS*/
selector .member-info{
    bottom: var(--bottom);
}
selector:hover .member-info{
    bottom: 0px;
}
				
			

визуально

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

Сурхаев Гасан

Разработчик

4

visuale code

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

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

				
					selector{
    --animated-color-1: #00ccff;
    --animated-color-2: #d400d4;
    --background-color: #162052;
    --border-width: 100px;
    --c-height: 400px;
}
selector{
    height: var(--c-height);
}
selector:before{
    content: "";
    position: absolute;
    inset: -10px var(--border-width);
    background: linear-gradient(315deg, var(--animated-color-1), var(--animated-color-2));
    width: auto;
    height: auto;
    transition: all .3s;
    animation: animate 4s linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
selector:after{
    background: var(--background-color);
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    z-index: 1;
}
selector:hover:before{
    inset: -20px 0px;
}
selector .content-section{
    height: 350px;
    width: 350px;
}
selector img{
    transition: all .5s;
}
selector:hover img{
    opacity: 0;
}
selector .elementor-widget-image{
    pointer-events: none;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: 350px;
}
selector .content-section{
    height: 320px;
    width: 320px;
}
}
				
			

визуально

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

Сурхаев Гасан

Разработчик

5

visuale code

Прокрутить вверх