Skip to main content
Skip to article

Modern Portfolio website codes


/*----SLIDE TOP RIGHT----*/

.hover--slide-top-right:hover path {
  animation: slide-top-right-out 0.2s, slide-top-right-in 0.2s 0.2s;   

@keyframes slide-top-right-out{
  to {transform: translate(100%, -100%) }  
@keyframes slide-top-right-in{
  from{ transform: translate(-100%, 100%)}
  to{transform: translate(0, 0) }

/*----SLIDE DOWN---*/

.hover--slide-down:hover path {
  animation: slide-down-out 0.2s forwards, slide-down-in 0.2s forwards 0.2s   

@keyframes slide-down-out{
  to { transform: translate(0, 100%) }  
@keyframes slide-down-in{
  from { transform: translate(0, -100%) }
  to {transform: translate(0, 0) }

/* CSS for menu item rollover effect */

.hover--rollover-menu li {
position: relative;
  overflow: hidden;
.hover--rollover-menu li a{
    transition: 0.3s !important

@media (min-width: 800px) {
.hover--rollover-menu li a::before {
    content: attr(data-title);  	
    position: absolute;
    top: 100%; 

.hover--rollover-menu li:hover a{
    transform: translateY(-100%);    


// Javascript code for menu items rollover effect

const menuItems = document.querySelectorAll('.hover--rollover-menu li')

menuItems.forEach(menuItem => {
    const menuLink = menuItem.querySelector('a')
	const menuItemAttr = menuLink.innerText
	menuLink.setAttribute("data-title", menuItemAttr)

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!