0 szavazat
(4,8e pont) által 

Miért van az, hogy az oldal alján az ikonok esetében a transition-transfrom működik, ha az i tagre használom, de ha az anchor tagre, a list item tagre vagy a social-icon class-re, akkor nem? Ha például az egész .head class-re próbálom, akkor simán működik, ezért nem értem és eddig nem találtam erre magyarázatot...

Itt a HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content="Walter White online névjegy">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Sarabun" rel="stylesheet">
  <title>Walter White</title>
</head>
<body>
  <div class="profile-card">
    <div class="head">
      <div class="profile-image">
        <img src="https://cdn3.movieweb.com/i/article/0TvMcG4es3dx98j6ltEqJaCVeo94ni/798:50/Breaking-Bad-Movie-Bryan-Cranston-Responds.jpg" alt="Walter White">
      </div>
      <div class="name-headline">
        <h1>Walter White</h1>
        <h2>high school chemistry teacher</h2>
        <p><i class="fas fa-map-marked-alt"></i> Albuquerque, New Mexico, USA</p></div>
    </div>
    <div class="content">
      <p class="about">Walter Hartwell "Walt" White Sr., also known by his clandestine alias Heisenberg, is a fictional character and the main protagonist of <a href="https://www.imdb.com/title/tt0903747/?ref_=fn_al_tt_1">Breaking Bad</a>. Walt moved to Albuquerque, New Mexico, where he became a high school chemistry teacher. Breaking Bad begins on Walt's 50th birthday, when he is diagnosed with Stage IIIA lung cancer. After this discovery, he resorts to manufacturing methamphetamine and drug dealing to ensure his family's financial security after his death.</p>
       <section class="links">
         <p>Contact him via:</p>
         <ul><li><a href="https://twitter.com/#" title="Twitter" class="social-icon"><i class="fab fa-twitter-square"></i></a></li>
           <li><a href="https://instagram.com/#" title="Instagram" class="social-icon"><i class="fab fa-instagram"></i></a></li>
           <li><a href="https://facebook.com" title="Facebook" class="social-icon"><i class="fab fa-facebook"></i></a></li></ul>
       </section>
    </div>
  </div>
</body>
</html>

és a CSS:

/* general styles */

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1483280070902-8c3c17694e77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80') no-repeat center center fixed;
  background-size: cover;
}

.head, .about, .links {
  background-color: hsla(0, 0%, 100%, .4);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%, .8) 10px 10px 80px;
  margin: 0 auto;
  text-align: center;
  margin-top: 2em;
  line-height: 1.5rem;
  font-family: 'Sarabun', sans-serif;
}

.profile-card {
  margin-top: 1em;
}

/* head */

.head {
  width: 60%;
  max-width: 500px;
  font-weight: 600;
  padding: 1em;
}

img {
  width: 50vw;
  max-width: 300px;
  border-radius: 15px;
  padding: 1px;
  margin-top: 1em;
  background-color: #94b8b8;
  transition: all 0.5s ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

h1 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.2rem;
}

h2 {
  color: #527a7a;
}

/* about */

.about {
  padding: 1.5em;
  width: 70%;
  max-width: 1500px;
  text-align: justify;
  text-justify: inter-word;
}

/* Contact links */
.links {
  width: 40%;
  max-width: 150px;
  margin-bottom: 2em;
  padding: .5em;
}

ul {
  list-style-type: none;
}

li {
  display: inline;
}

.social-icon {
  color: LightSeaGreen;
  font-size: 1.5rem;
/*inline elemekre nem működik a transition-transform*/
/*display: inline-block;
  transition: all 0.5s ease-in-out;*/
}

i {
  transition: all 0.5s ease-in-out;
}
/*.social-icon:hover {
  transform: scale(1.2);
}*/
i:hover {
  transform: scale(1.2);
}

1 válasz

0 szavazat
(4,8e pont) által 
 
Legjobb válasz

Ennek az az oka, hogy az pl. <a> az egy úgynevezett inline elem, és azokra nem alkalmazható a CSS transform szabály.

Néhány lehetséges megoldás:
- "Becsomagolod" egy másik elembe, ami block elem, vagy eleve a "legbelső" block, vagy inline-block elemet veszed alapul, és arra vonatkoztatod a szabályt. (jelenleg kb. ezt csinálod, és ez jó)
- Hozzá adod az adott elemhez a következő szabályok valamelyikét CSS-ben: display: block;, vagy display: inline-block;. Ekkor persze valamennyire megváltozik a "helyzete" is a weboldalon, erre figyelni kell.

...