css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#man {
background-color: rgb(209, 198, 198);
height: 300px;
width: 50%;
float: left;
}
#mann {
background-color: rgb(247, 181, 181);
height: 100px;
overflow: auto;
width: 50%;
float: left;
background-image: url(img/1.jpg);
/* background-attachment: fixed; */
}
#man:hover {
opacity: 0.5;
color: black;
}
#bal .bara {
visibility: hidden;
}
#bal:hover .bara {
visibility: visible;
}
</style>
</head>
<body>
<div id="man">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, placeat
excepturi doloremque, ab similique voluptates ea possimus ratione cum
culpa quam repudiandae quo! Suscipit culpa perferendis non ipsa repellat,
omnis perspiciatis quod repudiandae molestiae facilis et hic vel quasi.
Repudiandae reiciendis quos necessitatibus sapiente, earum eius officiis
impedit vitae in saepe, sunt voluptatibus illum quasi aliquid labore ad
commodi mollitia illo, totam culpa expedita quaerat temporibus quae
provident? Accusamus distinctio, doloremque nam dolorem nihil repudiandae
exercitationem natus ipsam, modi quas obcaecati fuga at assumenda eius? Ex
inventore impedit, itaque ipsam nesciunt aspernatur ab. Iure et corporis
rem eos cum veniam.
</div>
<div id="mann">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, delectus.
Tenetur eum hic blanditiis. Officia dolorum optio, cum esse ut odit,
laboriosam numquam enim incidunt, illo deleniti dolores voluptatibus
labore deserunt! Obcaecati facilis voluptas doloremque, vero vitae natus
dicta aliquam porro quae esse nam pariatur nulla, odio maiores deleniti
fugiat repudiandae omnis officia! Sapiente, iste itaque quam eveniet,
placeat, tenetur dolorem perspiciatis debitis molestiae harum doloribus
aperiam! Illum ab totam recusandae! Nostrum culpa saepe dolores voluptate
ipsum. Asperiores sunt quo aperiam fuga explicabo aliquid perferendis
recusandae quibusdam architecto consequatur incidunt, dolor deserunt hic
at magnam eum nobis. Sit, illum magnam.\
</div>
<a id="bal" href="#"
>Facebook <span class="bara">Facebook is a goog thing</span></a
>
</body>
</html>
No comments