bitte um beispiel Vorlage für ...

[Orac]

Hallo,
normalerweise Frage ich nicht gerne aber ich habe schon so viel versucht und mir raucht mittlerweile der Kopf das ich vor Wut alles gelöscht habe.

Also meine Versuche meine ich.

im Screenshot das rot Umrandete möchte ich haben also Links ein kleines Bild (was ich selber erstelle und die grösse immer gleich ist) rechts ein kleiner info Text und das ganze als Link versehen wobei bei hover der Text sich ändern soll.

wäre jemand so lieb und würde mir da ein Beispiel Code erstellen ?

vielen vielen Dank

 

[MrMurphy]

Hallo

Ich würde zu dem HTML

<article class="cards">
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/1" alt="Beispielbild">
      </figure>
      <div>
         <h3>Firefox</h3>
         <p>Get help for Firefox on Windows, Mac and Linux</p>
      </div>
   </a>
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/2" alt="Beispielbild">
      </figure>
      <div>
         <h3>Firefox for Android</h3>
         <p>Web browser for Android smartphones and tablets</p>
      </div>
   </a>
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/3" alt="Beispielbild">
      </figure>
      <div>
         <h3>Firefox for IOS</h3>
         <p>Firefox for iPhone, iPad and iPod touch devices</p>
      </div>
   </a>
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/4" alt="Beispielbild">
      </figure>
      <div>
         <h3>Firefox Focus</h3>
         <p>Automatic privacy browser and content blocker for mobile</p>
      </div>
   </a>
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/5" alt="Beispielbild">
      </figure>
      <div>
         <h3>Thunderbird</h3>
         <p>Email software for Windows, Mac and Linux</p>
      </div>
   </a>
   <a href="" class="card">
      <figure>
         <img src="http://lorempixel.com/120/120/city/6" alt="Beispielbild">
      </figure>
      <div>
         <h3>Support Questions</h3>
      </div>
   </a>
</article>

dieses CSS verwenden:

   /*.cards*/
   @media all {
   }
   @media only screen and (min-width: 800px) {
      .cards {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
   }

   /*.card*/
   @media all {
      .card {
         display: block;
         text-decoration: none;
         outline: none;
         box-shadow: 5px 5px 5px hsla(0, 0%, 20%, 0.5);
         padding: 0.5rem;
         border: 1px solid grey;
         border-radius: 0.4rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      .card:focus,
      .card:active,
      .card:hover {
         background-color: hsla(180, 65%, 81%, 0.6);
      }
      .card img {
         border-radius: 0.4rem;
      }
   }
   @media only screen and (min-width: 500px) {
      .card {
         display: flex;
      }
      .card figure {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 140px;
      }
      .card div {
         margin: 0rem 0rem 0rem 0.5rem;
      }
      .card h3 {
         margin-top: 0;
      }
   }
   @media only screen and (min-width: 800px) {
      .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0.5rem - 1rem - 2px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1200px) {
      .card {
         flex-basis: calc(33.33% - 0.25rem - 1rem - 2px - 0.5rem);
      }
   }

Gruss

MrMurphy

 

[Orac]

Danke schön