<details> Tag With an Image

Tags: details tag, summary tag, bela

Description:

so... I did a thing lol

it's a simple thing really.

but I still wanted to share :D

the <details> tag with an image in the <summary> tag.

below is the html and css 👍

here's my blog with more info on the <details> tag.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=2059) -->

<style>
details summary::-webkit-details-marker,
details summary::marker {display:none;content: "";}
.bubblegum{
    background: rgba(0,0,0,0.0);
    width: 300px;
}
.bubblegum summary img{
    width: 100%;
    padding:1px;
}
.bubblegum p{
    background: transparent;
    font-family: serif;
    padding: 5px;
    text-align: left;
    font-weight: bold;
}
/* if you want to add an image in the details text area, add this code:
.bubblegum img{
    height: 200px;
}
*/
</style>

<details class="bubblegum">
  <summary><img src="https://data.whicdn.com/images/188847948/original.jpg" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>
<details class="bubblegum">
  <summary><img src="https://pbs.twimg.com/media/CjqFQj-XIAATlm6.jpg" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>
<details class="bubblegum">
  <summary><img src="https://64.media.tumblr.com/1a10a0a7c4cfcd93348da7823d481923/8e4fbe8e5d6eeca8-80/s1280x1920/5d598bffb81f2d8c9b0f5c14208321b12f6ad735.jpg" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>
<details class="bubblegum">
  <summary><img src="https://data.whicdn.com/images/225133427/original.jpg" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>
<details class="bubblegum">
  <summary><img src="https://i.pinimg.com/originals/61/5f/20/615f2052a37c716ec4e036e759326ad8.jpg" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>
<details class="bubblegum">
  <summary><img src="https://i.pinimg.com/originals/4d/b1/ca/4db1caaee3f3950ca5f595c4781dd7c0.png" height="100"/></summary>
  <p>
    Lorem ipsum dolor sit amet, maiorum scaevola praesent te eam, sea et etiam oporteat. Vim habeo postea vivendum at, vix et meis nihil. Noster viderer evertitur sit eu, sit no elit facilis minimum. Prima paulo tamquam nam an.
<br/><br/>
Eam dolores accumsan noluisse an, mazim temporibus cum ad, te quo errem admodum accusata. Ei pro legere omnium alienum. Pri ut ceteros convenire, eros reformidans disputationi quo ad. Pro accusata electram democritum te, usu tale alienum cu, tollit vocibus nec ex. Vis ex summo inimicus aliquando, diam dicta splendide qui id. Vix ad suas adipisci.
  </p>
</details>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 0 of 0 comments ( View all | Add Comment )