skip to Main Content

I’m actually not a coder in any level, just trying to do my own website.

I found some codes to create a marquee effect. But i decided that it will be enough to me if i remove offset value from codes.

So, i just want my "bold headlines" turn to "italic" style when i hover them. And also i want to keep pics with hover on. But when i try to delete or change some lines, the offset value keeps sliding. I mean, when i hover on headline, i see multiple headlines next to that one in italic style.

I guess some lines of this code is unnecessary but here is the CSS:

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    font-size: 15px;
}

body {
    margin: 0;
    --color-text: #000000;
    --color-bg: #000000;
    --color-link: #000000;
    --color-link-hover: #000000;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sofia-pro, sans-serif;
}

a {
    text-decoration: none;
    color: var(--color-link);
    outline: #cec7ff;
}

a:hover,
a:focus {
    color: var(--color-link-hover);
    outline: none;
}

.menu {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 10vh 0 25vh;
    --marquee-width: 100vw;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    --item-font-size: 5vw;
    counter-reset: menu;
}

.menu__item {
    cursor: default;
    position: relative;
    padding: 0 5vw;
}

.menu__item-link {
    display: inline-block;
    cursor: pointer;
    position: relative;
    -webkit-text-stroke: 0px #000;
    text-stroke: 0px #000;
    -webkit-text-fill-color: #000000;
    text-fill-color: transparent;
    color: transparent;
    transition: opacity 0.4s;
}

.menu__item-link:hover {
    transition-duration: 0.1s;
    opacity: 0;
}

.menu__item-img {
    pointer-events: none;
    position: absolute;
    height: 30vh;
    max-height: 400px;
    opacity: 0;
    left: 120%;
    top: 50%;
    transform: translate3d(calc(-100% - 6vw),-30%,0) translate3d(0,10px,0);
}

.menu__item-link:hover + .menu__item-img {
    opacity: 1;
    transform: translate3d(calc(-100% - 6vw),-30%,0) rotate3d(0,0,0,0deg);
    transition: all 0.2s;
}

/* Make sure 3 items are visible in the viewport by setting suitable font size. */

.marquee {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--marquee-width);
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: color-burn;
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 6s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.1s;
}

.menu__item-link:hover ~ .marquee .marquee__inner {
    animation-play-state: running;
    opacity: 1;
    transition-duration: 0.4s;
}

.marquee span {
    text-align: center;

}

.menu__item-link,
.marquee span {
    white-space: nowrap;
    font-size: var(--item-font-size);
    padding: 0 1vw;
    font-weight: 900;
    line-height: 1.15;
}

.marquee span {
    font-style: italic;
}

@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

@media screen and (min-width: 53em) {
    .frame {
        text-align: left;
        display: grid;
        align-content: space-between;
        width: 100%;
        padding: 2.5rem 6vw;
        pointer-events: none;
        grid-template-columns: 75% 25%;
        grid-template-rows: auto;
    }
  }

2

Answers


  1. To make bold headlines turn italic on hover using CSS, you can use the :hover pseudo-class along with the font-style property. Here’s an example:

    <h1 class="headline">This is a bold headline</h1>
    

    CSS:

    .headline {
      font-weight: bold;
      transition: font-style 0.3s ease; /* Add transition for smooth effect */
    }
    
    .headline:hover {
      font-style: italic;
    }
    

    In the above example, the font-weight: bold; rule is applied to make the headline bold by default. The transition property is added to create a smooth transition effect when the style changes.

    The :hover pseudo-class is used to target the element when the mouse is hovered over it. Inside the :hover rule, we set font-style: italic; to change the font style to italic when the headline is hovered.

    By combining these CSS rules, you can achieve the effect of making bold headlines turn italic on hover.

    Login or Signup to reply.
  2. Just Copy Paste The Following Code in Your CSS
    Assuming that your headline is a span inside marquee:

    .marquee span{
    transition: font-style 0.3s ease;
    }
    
    .marquee span:hover {
        font-style: italic !important;
       font-weight: 700 !important;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search